onClick не работает над компонентом Popper во всплывающей подсказке Material-UI

Question

Предполагаемое поведение - go к другой странице при нажатии всплывающей подсказки. для достижения этой функциональности я предоставил опору onClick для объекта PopperProps.

Ниже мой код:

interface Props extends TooltipProps{}

const CustomTooltip : React.FC<Props> = (props) => {
  const { arrow, ...classes } = useStylesBootstrap();
  const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.preventDefault();
    event.stopPropagation();
    console.log("clicked");
    window.location.replace('/info/contact-us');
  };

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        style: { border: "1px red solid" },
        onClick: handleClick,
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={(
        <>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </>
        )}
    />
  );
};

Answer 1

Вам необходимо предоставить interactive реквизит для Tooltip. Если interactive не указано, Tooltip отключает события указателя (поэтому щелчок ничего не делает), но pointer-events установлен на auto, когда интерактивный true, Опора interactive также предотвращает немедленное закрытие Tooltip при перемещении мыши от элемента запуска к Tooltip.

. Вот рабочий пример:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

export default function SimpleTooltips() {
  return (
    <div>
      <Tooltip
        interactive
        title={
          <div onClick={() => console.log("clicked tooltip text")}>Delete</div>
        }
      >
        <IconButton aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}