JedWatson / JedWatson/react-select
Interacting with options triggers hover effect on a button underneath.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hey!
I've got an issue. Let's assume we have two components - a select and a button. The button lies to the bottom of the select.
When you open the select, its option list covers this button.
If you click on an option that lies just on top of that button, the button gets hover effect and it doesn't "stop" unless you click again on the screen.
Note: the issue is reproduced only on touch devices, particularly in Safari. Doesn't reproduce in Chrome.
Sandbox: https://codesandbox.io/s/codesandboxer-example-forked-nr4qnf?file=/example.tsx
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 the linked CodeSandbox example.tsx and reproduce the interaction on a touch device, particularly Safari. Compare the behavior with Chrome and trace the select option overlay and underlying button hover behavior. Done means selecting an option no longer leaves the covered button in a hover state without another screen click.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100