aws-amplify / aws-amplify/amplify-ui

Making a selection using a SelectField initiates text selection in Firefox on Windows

Open
#5,216 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug CSS Primitive React
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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.