Feature Request: Change the 'Menu' to use the Popover API

[cutterbl]

Now that the Popover API is standard in all browsers, it would be great if the MenuList were a true 'popover'. This would allow developers to use react-select on native <dialog>'s, and remove the need for occasional document portaling. I know this would be easier if CSS Anchor Positioning was fully supported (We can dream, can't we? Come on Safari and FF!). But I think using @floating-ui as a polyfill would cover the gap until that time comes. Probably trim some code too. If you did go this route, I would suggest a custom @floating-ui/dom implementation though, rather than their React components. My $.02.

[zayprom]

@cutterbl Hi, from your comment it seems that you managed to use native dialog in combination with react-select. I know the question probably does not belong here but how you managed to solve potential overflow. Unfortunately portaling did not help me as using "showModal()" is setting dialog in #top-layer so the Menu is always lower. Thanks in advance!

[cutterbl]

@zayprom This is the purpose of my Feature Request. I'm not using native dialogs yet because of the need to render react-select on my dialogs. If react-select were to use the Popover API, for rendering of the MenuList, then it should be possible, as then the menu would automatically be on a higher layer of the top layer. You are correct, menu portaling does not work in that instance.

I have several custom components in my own application (date time picker, cron picker, tree select control) where I have traded the 'picker's to use the Popover API with great success. (Still need @floating-ui for anchoring the control though. Come on Safari and FF!)

[zayprom]

@cutterbl thanks for the feedback! I totally got your idea. For now I had to basically use both modal a non-modal native dialogs. For places where I am sure there would be overflow elements I keep using show() method, with that it is possible to stick to portalling + layer elements using z-index. Unfortunstely with this solution we miss all goodies from showModal(). Popover will help so much.

The only downside is that older versions of React still does not support it...

[cutterbl]

@zayprom I use the Popover API in my React 17 app. I just had to give a value to the popover attribute.

[zayprom]

@zayprom I use the Popover API in my React 17 app. I just had to give a value to the popover attribute.

yep, that should be the usual case. Unfortunately React 16, yeah, someone still on it :), does not support it. Maybe it is issue in our @types/react, I will test it soon. Anyways, I keep watching your request, thanks for bringing this up as this is a nice improvement and prevents some weak points when react-select is used with .