Here is my problem:

I have a component (for reuse). This component has a background that casts a clear shadow on hover. To prevent objects that also have a shadow from inheriting it (because that looks awful), the background is only used to display the shadow on hover. All other elements are arranged in their own group/box.

Above the background component is a box with another icon button that is only visible on hover. On click, the dropdown of this icon button is then expanded. I make it visible and invisible again with a Boolean String on Hover. Note: Even Mouse Enter or Mouse Leave doesn’t fix my problem.

When I move the mouse pointer out of the parent box, the icon button also disappears. Because the dropdown goes beyond the box and if I select an entry in the select box with the mouse, I leave the parent box and the dropdown disappears.

I have summarized the conditions in a picture because unfortunately I am not allowed to share the prototype.

Is there perhaps a simple solution to get around this? Because this seems to me to be a very classic scenario in a UI?

Thank you.