JedWatson / JedWatson/react-select

Inconsistent Behavior With Magnification When Selecting Dropdowns

Open
#5,881 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
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
  1. Implement a custom React hook for dynamic UI scaling, adjusting to user interactions and specific application states.
  2. Interact with a <Select/> component to trigger the dropdown expansion.
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.