Mobile Popovers / Menu not opening in tray #5025
-
When viewing a component built with usePopover, useSelect, useMenu, etc. I have seen in video examples and documentation that the components or lists should open in a tray on mobile devices or small screens. I haven't been able to do this with my own components or with the component examples in the react-aria docs. I have tried on both smaller chrome screens on Windows and on an Android mobile device. Am I missing something? Is this functionality not provided by the hooks we use to build the components? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
That's fairly advanced, I don't think we have any examples in the hooks pages with this yet because it'd take up so much space, but we'd definitely welcome it as an improvement as it is a fairly common thing to do. |
Beta Was this translation helpful? Give feedback.
That's fairly advanced, I don't think we have any examples in the hooks pages with this yet because it'd take up so much space, but we'd definitely welcome it as an improvement as it is a fairly common thing to do.
You can look at our component's implementation to get an idea of how to do it. This is for Menu. Other components may handle it in slightly different ways.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/src/MenuTrigger.tsx#L75
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/overlays/src/Tray.tsx