Dropdown in hover cannot point to item

[darlk]

Describe the bug set dropdown component in hover trigger mod mouse enter is ok, but mouse leave, the menu is close too...

To Reproduce https://flowbite-react.com/storybook/?path=/docs/components-dropdown--inline set trigger mod in hover

Expected behavior mouse can point to menu any time an select something

Screenshots

System information:

• Device:
• Resolution:
• OS:
• Browser:
• Version:

Project information:

• Tailwind: 3.0.0
• Flowbite: 1.5.3
• Flowbite React: 0.2.1
• Type: CRA

Additional context

[TD-Developer]

Taking a quick look at this, I think this can be fixed by implementing the handleClose prop of useHover hook provided by the @floating-ui/react-dom-interactions package.

lines 87-92 in Floating.tsx

const { getFloatingProps, getReferenceProps } = useInteractions([
    useClick(context, { enabled: trigger === 'click' }),
    useFocus(context),
    useHover(context, { enabled: trigger === 'hover' }),
    useRole(context, { role: 'tooltip' }),
  ]);

would become:

const { getFloatingProps, getReferenceProps } = useInteractions([
    useClick(context, { enabled: trigger === 'click' }),
    useFocus(context),
    useHover(context, { 
        enabled: trigger === 'hover' ,
        handleClose: safePolygon(),
    }),
    useRole(context, { role: 'tooltip' }),
  ]);

The useHover docs are here.

FYI: The Tooltip component also uses Floating.tsx (maybe other/future components), so the hover tooltip would also remain open on mouseover. Not sure that's desirable though.

[VedanthB]

Hi, I'd like to try to fix this, is this up for grabs?

[rluders]

@VedanthB go ahead

[VedanthB]

Hey @rluders, I've fixed this and raised a PR, please review. 😄