[FEATURE REQUEST] Make Backrops optional on Menu/Popover

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))

https://gluestack.io/

MIT License

2.45k stars 116 forks source link

[FEATURE REQUEST] Make Backrops optional on Menu/Popover #1742

Open sem4phor opened 8 months ago

sem4phor commented 8 months ago

Description

The popover and menu highly rely on the backdrop to dismiss themselves. This makes it hard to just click a button somewhere else because i have to dismiss the menu first. It would be great to have the option to just make it close while propagating the clicks to whatever elemnt outside the menu is clicked.

Problem Statement

User Story:

As a User having an open Menu/Popover I want to be able to click a button outside the menu without dismissing the Menu/Popver with an extra click first, to get less disrupted in my workflow.

Proposed Solution or API

For Menu make the Backdrop optional by making it a component like in popover
When no backdrop is present the click just "goes through"

Alternatives

No response

Additional Information

No response

sem4phor commented 8 months ago

I just figured out that i can workaround on the popover by:

using no <PopoverBackdrop /> component
pointerEvents: 'box-none' on the <Popover />component

Without the backdrop the popover will not close which can be worked around by using click outside packages ( useClickAway from @uidotdev/usehooks on web and react-native-click-outside for native.

For the menu all of that does not work...

rkahle commented 1 month ago

The backdrop makes any other UI element unclickable as long as the Menu is opened. This is not a good UX as users then need two clicks instead of one to interact with any other UI element.

Other UI libraries do not implement Menus like this, so please consider this Feature Request...