[Bug]: In Firefox, in some circumstances, selecting a SelectItem within a Select doesnt update the chosen value

[briangleeson]

Package

@carbon/react

Browser

Firefox

Package version

1.73.0

React version

17.0.2

Description

In our application we have a Select populated with a list of SelectItems. In Firefox only, when selecting an option the value does not change, it is stuck with the currently selected value. Although one can sometimes see a flicker of the new value before the old value reappears. We suspect this issue is related to this (old & closed) issue raised in React's repo: facebook/react#12584 (comment), where they describe that the onMouseDown event is fired twice and interferes with React's state updates, thus causing the same issue described here. However, I could not reproduce the issue with a simple stackblitz example.

There is an onMouseDown event handler in the Select component:

carbon/packages/react/src/components/Select/Select.tsx

Line 240 in ad0ba86

onMouseDown: (evt) => {

We tested a few ideas locally and found that adding an evt.stopPropagation() to that handler fixes the problem. Could this fix be considered for addition to the Select component?

    onMouseDown: (evt) => {
      // NOTE: does not prevent click
      if (readOnly) {
        evt.preventDefault();
        // focus on the element as per readonly input behavior
        evt.target.focus();
      }
      evt.stopPropagation(); // FIX for Firefox issue
    },

Workaround = Use a different browser

Reproduction/example

https://stackblitz.com/edit/github-grcad4ps-fyosutre?file=src%2FApp.jsx

Steps to reproduce

Unfortunately I could not reproduce the issue with a simple stackblitz example (see the link for my attempt). It's possible that the React version (v17.0.2) we're using and/or the inclusion of Redux, is a factor in this problem. However, the potential fix we found should be low impact and could be added anyway if it's agreed to be safe.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems