diff --git a/packages/react/src/popover/root/usePopoverRoot.ts b/packages/react/src/popover/root/usePopoverRoot.ts index 5737bbb07e..a7a0950ba8 100644 --- a/packages/react/src/popover/root/usePopoverRoot.ts +++ b/packages/react/src/popover/root/usePopoverRoot.ts @@ -45,10 +45,10 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo const [triggerElement, setTriggerElement] = React.useState(null); const [positionerElement, setPositionerElement] = React.useState(null); const [openReason, setOpenReason] = React.useState(null); - const [stickIfOpen, setStickIfOpen] = React.useState(true); + const [clickEnabled, setClickEnabled] = React.useState(true); const popupRef = React.useRef(null); - const stickIfOpenTimeoutRef = React.useRef(-1); + const clickEnabledTimeoutRef = React.useRef(-1); const [open, setOpenUnwrapped] = useControlled({ controlled: externalOpen, @@ -57,8 +57,8 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo state: 'open', }); - if (!open && !stickIfOpen) { - setStickIfOpen(true); + if (!open && !clickEnabled) { + setClickEnabled(true); } const onOpenChange = useEventCallback(onOpenChangeProp); @@ -87,7 +87,7 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo React.useEffect(() => { return () => { - clearTimeout(stickIfOpenTimeoutRef.current); + clearTimeout(clickEnabledTimeoutRef.current); }; }, []); @@ -104,11 +104,11 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo } if (isHover) { - // Only allow "patient" clicks to close the popover if it's open. - // If they clicked within 500ms of the popover opening, keep it open. - clearTimeout(stickIfOpenTimeoutRef.current); - stickIfOpenTimeoutRef.current = window.setTimeout(() => { - setStickIfOpen(false); + // Prevent impatient clicks from unexpectedly closing the popover. + setClickEnabled(false); + clearTimeout(clickEnabledTimeoutRef.current); + clickEnabledTimeoutRef.current = window.setTimeout(() => { + setClickEnabled(true); }, PATIENT_CLICK_THRESHOLD); ReactDOM.flushSync(changeState); @@ -138,7 +138,8 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo }); const click = useClick(context, { - stickIfOpen, + enabled: clickEnabled, + stickIfOpen: false, }); const dismiss = useDismiss(context);