React Popover component - Material UI

Question

I'm trying to make a color palette which functions like: when I hover over the PaletteIcon it should popover the color palette and I should be able to select the colors as desired. But after hovering when I try to select the color, the palette disappears. Is there any property which I can add to paper React component or some other way to achieve this? I checked the Paper API documentation but didn't find any solution.

Here is the link for CodeSandbox .

Answer 1

Popover is not rendered in the same tree as your Button, it is not a descendant of Button so therefore this logic would be very hard to implement out-of-the-box.

You could remove onMouseLeave event and close the Popover once the color is selected. Or you could just control the popover with clicking on the Button.

Or you could add your custom Popover as a child of Button element and therefore hover will remain on parent.

Answer 2

TL;DR: remove pointerEvents: "none" to listening to events from the popover content, remove your anchor's (Fab) onMouseLeave and control the popover when hovering ( onMouseEnter , onMouseLeave ) its content or the popover's backdrop.

NL;PR: I modified your Pastebin to reflect that change . Alternatively, you can opt for using a state management API ).