callstack / callstack/react-native-paper

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

Đang mở
#3,854 15 bình luận 3 reaction 0 người được giao Xem trên GitHub
bug Menu
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với ứng dụng tái hiện trên branch menu-auto-dismiss-web và xác minh hành vi trong trình duyệt desktop. Theo dõi việc định vị và hành vi loại bỏ của web Menu, sử dụng hành vi mong đợi và hành vi thực tế trong issue này làm tiêu chí chấp nhận; fix cần giữ cho Menu có thể truy cập được khi nó vượt ra ngoài cửa sổ trình duyệt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
frontend, web-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.