JedWatson / JedWatson/react-select
Inconsistent Behavior With Magnification When Selecting Dropdowns
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Issue: Intermittent Magnification Reset on Dropdown Interaction
Description
We're encountering an intermittent issue where the magnification feature is unexpectedly disabled upon interacting with dropdown menus. This leads to the screen re-centering and resetting the magnification level to its default setting. This problem occurs regardless of the magnification level chosen, the specific dropdown menu interacted with, or the toolbox state (open or closed).
Steps to Reproduce
- Implement a custom React hook for dynamic UI scaling, adjusting to user interactions and specific application states.
- Interact with a
<Select/>component to trigger the dropdown expansion. - Occasionally, the magnification will turn off and the screen will re-center.
Note: This issue is inconsistent and does not happen with every interaction, complicating the reproduction process.
Expected Behavior
The magnification settings should remain consistent when interacting with dropdown menus, without causing the screen to re-center or the magnification to reset.
Actual Behavior
Sometimes, upon selecting an option from a dropdown menu, the magnification turns off, and the screen re-centers. This occurs regardless of the magnification level or the specific dropdown used.
Possible Workaround
We've identified a temporary workaround using pinch-to-zoom gestures instead of our built-in magnification tool. We're interested in more permanent solutions.
Request for Suggestions
We welcome any suggestions, ideas, or insights for a lasting solution to this issue. We're also open to providing sample code snippets (as sharing our entire codebase is impossible) to troubleshoot the problem further.
Environment
- React Select Version: 5.2.2
- React Version: 18.2
- Operating System: macOS 11.6, macOS 12.3, iPadOS 16.1, iPadOS 17.3.1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with a minimal reproduction using React Select 5.2.2 and React 18.2, including the described custom magnification hook, and test dropdown interactions across the listed environments. Compare the magnification state before and after selecting an option; done means the reset and screen re-centering can be reproduced, explained, and prevented without relying on the pinch-to-zoom workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100