Menu automatically dismisses on web when outside the bounds of the window

[CodingItWrong]

Current behaviour

On web on desktop browsers (at least on macOS), when a Menu attempts to display and it partially falls outside the bounds of the browser window, it auto-dismisses.

Expected behaviour

Ideally, the Menu would position itself so that it would not attempt to display outside the bounds of the browser window, so that no scrolling is needed. But if it does attempt to display outside the bounds of the browser window, it would not auto-dismiss, so that at least the user can access it by scrolling.

How to reproduce?

https://github.com/CodingItWrong/paper-sandbox/tree/menu-auto-dismiss-web

• Open the app in any desktop web browser (tested in Chrome, Safari, and Firefox for Mac)
• Click each menu button
• Expected: the menu displays for all buttons
• Actual: on any web browser for Mac, the left and right menus display, but the right button flashes and is automatically dismissed

Note: the bug does not occur on iOS or Android native, on iOS Safari, or on Android Chrome.

Preview

https://user-images.githubusercontent.com/15832198/235136708-714c7fe3-6733-4515-9ecf-f4fc341db690.mov

What have you tried so far?

Tried adjusting anchorPosition so the Menu displays within the window. But since it is displaying off to the right, anchorPosition's top and bottom don't help. It might be a workaround if we could anchor to left and right, similar to MUI: https://mui.com/material-ui/react-popover/#anchor-playground

Tried adding margin to the right of the button so that the menu fully fits within the browser window. This prevents triggering the issue, but will be challenging for my use case on small screens.

Your Environment

software	version
ios	16.2
android	n/a
react-native	0.71.7
react-native-paper	5.7.0
node	18.15.0
npm or yarn	yarn 1.22.19
expo sdk	48.0.15

[jboyan]

see also #3716

[CodingItWrong]

Thanks @jboyan, #3678 (linked from #3716) seems relates too

[nappa0326]

I have the same problem. Any solusions? If the menu over the right or bottom edges of the screen, a screen redraw will occur and the menu will be automatically dismissed.

https://snack.expo.dev/@nappa0326/popupmenusample?platform=web

In this sample, the menu is not automatically dismissed, But when the menu is displayed by clicking on the right or bottom edge of the screen, a scrollbar appears for a moment, and the scrollbar also appears to change with the easing of the menu.

[ErionTp]

Another problem is when I have a list of let's say for example 100 items inside the menu. In this case, the menu won't open. Cause the height of the list becomes bigger than the screen. I tried to put a flatlist inside and everything works ok, but I don't think it is the best solution. Any solutions, please?

[nappa0326]

anybody there? I tried with 5.8.0 and it was not fixed..

[dheeraj539]

Facing the same issue after upgrading my expo SDK version from 45 to 46 (Working without any issues in expo SDK 45)

[yang-sprinter]

I am also running into this issue.

[augini]

I think this is not a solution but more like a workaround that wrapping the menu inside PaperProvider seems to avoid the menu from automatically dismissing.

[jarredkenny]

Having the same problem. The wrapping in PaperProvider just pushes things around in my layout.

[yang-sprinter]

@lukewalczak would you be able to look into or suggest a solution for this? Seems like a number of folks are still running into this issue.

[VladTabacariu]

can confirm. same here. the menu autodismises if its left most positioned.

[lukewalczak]

We're really open to getting help and contributions for the library! If you'd like to explore the issue and share your solution, we'd truly appreciate it.

[dzinreach]

Same here. The menu takes a sec to show and then dismisses within a sec of showing. It actually shows up properly when I wrap the component with <PaperProvider> BUT it messes up the rest of the layout.

Using the latest React Native Paper and Expo SDK 50.

If anyone finds a workaround please share.

[lukewis]

In my experimentation, the workaround appears to be inserting the "overflow: 'hidden'" style into your view hierarchy at an appropriate location. How do you find the appropriate location?

1. Open the dev tools and go to the "elements" (DOM) view
2. Open the menu

As the menu appears briefly (and then immediately disappears), you'll see a new div element appear in the DOM. You'll then need to apply the "overflow: 'hidden'" style ABOVE that level. In my case, the root of my app was a PaperProvider. I added a view above this level with the overflow style set to hidden, and now the menu sticks around correctly. YMMV, but I hope this helps!

<View style={styles.root}>
      <PaperProvider>
         ...
      </PaperProvider>
</View>

const styles = StyleSheet.create({
  root: {
    flex: 1,
    overflow: "hidden"
  }
}