aws-amplify / aws-amplify/amplify-ui
Making a selection using a SelectField initiates text selection in Firefox on Windows
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### Before creating a new issue, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).
### On which framework/platform are you having an issue?
React
### Which UI component?
Primitive components
### How is your app built?
Next.js
### What browsers are you seeing the problem on?
Firefox
### Which region are you seeing the problem in?
_No response_
### Please describe your bug.
When making a selection using a SelectField component in Firefox on Windows, after clicking on an option in the dropdown, the chosen value in the SelectField is focused and has an active text selection.
### What's the expected behaviour?
The text label of the current value in the SelectField should not become selected when choosing an option.
### Help us reproduce the bug!
Using Firefox on Windows:
1. Using a mouse, click on a SelectField component. The options dropdown will appear.
2. Make a selection using the keyboard or mouse pointer.
3. Without any additional clicks, move the mouse pointer left and right and observe that the contents of the SelectField is being selected with a text selection region.
4. Click outside of the SelectField to unfocus the element and cancel the text selection.
### Code Snippet
```html
Apple
Banana
Orange
Pineapple
Kiwi
Tangerine
```
### Console log output
_No response_
### Additional information and screenshots
Tested in Chrome, Safari, and Firefox on Windows 10 and macOS. This appears to only affect Firefox on Windows.
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 by reproducing the SelectField behavior in Firefox on Windows with the HTML snippet and the listed keyboard or mouse steps, then locate the SelectField primitive implementation. The fix is complete when choosing an option no longer creates an active text selection, while the existing selection behavior remains unchanged in the other tested browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100