Delay Before Popover Appears

[shelbyt]

for the Mouse Over Interaction is it possible to have a delay (for debounce purposes) before the popover appears? i.e. Instead of the content showing up immediately, a user has to hover for about 800ms before the popover shows up.

Transition duration doesn't work because that just delays the animation, an 800ms transitionDuration just makes the fade come in over 800ms.

[jedwards1211]

sorry for the delay. I'm busy with work stuff so it will take me awhile to look into this. I'd be open to a PR if I don't get to it first

[braco]

Did this ever get implemented?

[sidrak19]

+1 for this

[yunxu1630]

+1

[punkle]

I wonder has anyone found a work around to achieve this?

[mfen]

+1.

I wonder has anyone found a work around to achieve this?

A workaround might be to wrap the event handlers returned from bindHover() to inject a delay; seems to work with some light testing. e.g. with a custom hook:

export function bindDelayedHover(popupState: PopupState, delayMs = 200) {
  const { onTouchStart, onMouseOver, onMouseLeave, ...hoverAriaProps } =
    bindHover(popupState);

  const timeout = useRef<NodeJS.Timeout | null>(null);

  const delayedMouseOver = useCallback(
    (e: React.MouseEvent) => {
      if (timeout.current) clearTimeout(timeout.current);

      // material-ui-popup-state's event handler uses currentTarget to set the anchorEl, but
      // currentTarget is only defined while the initial event is firing. Save the original
      // and set it again before calling the delayed event handler
      const { currentTarget } = e;
      timeout.current = setTimeout(() => {
        e.currentTarget = currentTarget;
        onMouseOver(e);
      }, delayMs);
    },
    [onMouseOver]
  );

  const handleMouseLeave = useCallback(
    (e: React.MouseEvent) => {
      if (timeout.current) clearTimeout(timeout.current);
      onMouseLeave(e);
    },
    [onMouseLeave]
  );

  return {
    onTouchStart,
    onMouseOver: delayedMouseOver,
    onMouseLeave: handleMouseLeave,
    ...hoverAriaProps,
  };
}

Sample usage:

const popupState = usePopupState({
  variant: "popover",
  popupId: "example"
});

return (
  <>
    <span {...bindDelayedHover(popupState, 500)}>
      Example Hover
    </span>
    <HoverMenu
      {...bindMenu(popupState)}
      ...

[Slmii]

this works for me with some adjustment based on @mfen answer

const timeout = useRef<NodeJS.Timeout | null>(null);

const handleOnMouseEnter = (
	e: React.MouseEvent<HTMLElement>,
	onMouseOver: (e: React.MouseEvent<HTMLElement>) => void
) => {
	if (timeout.current) {
		clearTimeout(timeout.current);
	}

	const currentTarget = e.currentTarget;
	timeout.current = setTimeout(() => {
		e.currentTarget = currentTarget;
		onMouseOver(e);
	}, 500);
};

const handleMouseLeave = (e: React.MouseEvent, onMouseLeave: (event: React.MouseEvent) => void) => {
	if (timeout.current) {
		clearTimeout(timeout.current);
	}

	onMouseLeave(e);
};

<PopupState variant="popover" popupId="demo-popup-popover">
		{popupState => {
			const { onMouseLeave, onMouseOver, ...rest } = bindHover(popupState);

			return (
				<div>
					<Box
						{...rest}
						onMouseOver={e => handleOnMouseEnter(e, onMouseOver)}
						onMouseLeave={e => handleMouseLeave(e, onMouseLeave)}
					>
						{label}
					</Box>
					...
				</div>
			);
		}}
</PopupState>


				

[cmdcolin]

I'm trying to do the reverse of this issue where there is a delay before disappearing, especially for a cascading menu use case. if anyone has any ideas, let me know #149