callstack / callstack/react-native-paper

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

Ouverte
#3,854 15 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
bug Menu
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’application de reproduction sur la branche menu-auto-dismiss-web et vérifiez le comportement dans un navigateur de bureau. Suivez le positionnement et le comportement de fermeture du web Menu, en utilisant les comportements attendu et observé dans cet issue comme critères d’acceptation ; le fix doit maintenir le Menu accessible lorsqu’il dépasse la fenêtre du navigateur.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
frontend, web-dev
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.