Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
patorpey opened this issue May 4, 2024 · 1 comment
Open
4 tasks done
Labels
bug Something isn't working CSS Bugs or features related to CSS Primitive An issue or a feature-request for one or more UI Primitive React An issue or a feature-request for React platform

Comments

@patorpey
Copy link

patorpey commented May 4, 2024

Before creating a new issue, please confirm:

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

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

@github-actions github-actions bot added the pending-triage Issue is pending triage label May 4, 2024
@esauerbo esauerbo added React An issue or a feature-request for React platform Primitive An issue or a feature-request for one or more UI Primitive CSS Bugs or features related to CSS bug Something isn't working and removed pending-triage Issue is pending triage labels May 6, 2024
@esauerbo
Copy link
Contributor

esauerbo commented May 6, 2024

Hi @patorpey thanks for creating this issue! We'll add this to our project roadmap to look into a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working CSS Bugs or features related to CSS Primitive An issue or a feature-request for one or more UI Primitive React An issue or a feature-request for React platform
Projects
None yet
Development

No branches or pull requests

2 participants