amplify-ui
amplify-ui copied to clipboard
Making a selection using a SelectField initiates text selection in Firefox on Windows
Before creating a new issue, please confirm:
- [X] I have searched for duplicate or closed issues and 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.
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:
- Using a mouse, click on a SelectField component. The options dropdown will appear.
- Make a selection using the keyboard or mouse pointer.
- 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.
- Click outside of the SelectField to unfocus the element and cancel the text selection.
Code Snippet
<SelectField label="Fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange" disabled>Orange</option>
<option value="pineapple">Pineapple</option>
<option value="kiwi">Kiwi</option>
<option value="tangerine">Tangerine</option>
</SelectField>
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.
Hi @patorpey thanks for creating this issue! We'll add this to our project roadmap to look into a fix.