callstack / callstack/react-native-paper

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

オープン
#3,854 コメント 15 件 リアクション 3 件 担当者 0 名 GitHub で見る
bug Menu
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
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 の期待される動作と実際の動作を受け入れ基準として使用してください。fix では、Menu がブラウザウィンドウの外側にはみ出す場合でもアクセス可能な状態を維持する必要があります。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
frontend, web-dev
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。