callstack / callstack/react-native-paper

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

未关闭
#3,854 15 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看
bug Menu
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

从 menu-auto-dismiss-web 分支上的复现应用开始,并在桌面浏览器中验证行为。跟踪 web Menu 的定位和关闭行为,以此 issue 中的预期行为和实际行为作为验收标准;修复应确保 Menu 在超出浏览器窗口时仍可访问。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
frontend, web-dev
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。