Select dropdown menu selects the first non-disabled element when no value is selected

[litera]

Duplicates

• I have searched the existing issues

Note: I've found the original regression (#27299) and another bug (#34731), that is caused by the same code in the SelectInput.js intro'ed by the said regression, but both relate to the use of ListSubheader component. This issue I just opened, shows that this is not the case. The only requirement to observe the bug is to have the first select option disabled. Whether you want to set this issue as a duplicate is fine, but it has more details that explain the problem.

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-ts-5kpn2t?file=App.tsx

Steps:

1. No value is selected
2. Open the select dropdown
3. The first non-disabled element is visually selected (has Mui-selected class applied)

Current behavior 😯

When the dropdown list displays, the first non-disabled element is visually selected regardless of the actual value of the Select component.
Important: keyboard interaction with the component works. Mentioning this, because that was one of the side effects that the regression was mitigating with selecting the first selectable item.

Expected behavior 🤔

If none of the options in the dropdown matches the Select component's value, no item should be visually selected regardless of their disabled state. Keyboard interaction with the list should still work.

Context 🔦

Investigation:

This only happens under these conditions:

1. the Select component's value is falsey.
2. the first item in the list is either disabled or has the value of undefined

When both are true, the first next item in the dropdown, that has a defined value and is not disabled, will get visually selected.

This is the code from the SelectInput.js:

selected:
  arr[0]?.props?.value === undefined || arr[0]?.props?.disabled === true
    ? isFirstSelectableElement()
    : selected,

Where arr is the array of children (=dropdown MenuItem options), and the isFirstSelectableElement function does this:

const isFirstSelectableElement = () => {
  if (value) { // no value is currently selected so this one skips
    return selected;
  }
  // finds the first selectable item in the dropdown list
  const firstSelectableElement = arr.find(
    (item) => item?.props?.value !== undefined && item.props.disabled !== true,
  );
  if (child === firstSelectableElement) {
    return true; // <=== THIS AUTOMATICALLY SELECTS the first non-disabled item in the list
  }
  return selected;
};

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

This bug is completely envoronment/browser independent.

[litera]

Bug mitigation

Knowing the behaviour, we can mitigate the bug by adding an invisible non-disabled drop down item with a defined dummy value to the top of the list so the check on the first item fails and selected props gets assigned the selected value as it should.

Important

By mitigating this issues this way we loose the keyboard interaction with the list (again) as the original regression was mitigating it by selecting the first selectable item. Apparently to resolve this issue correctly one should find and resolve the keyboard interaction bug related to the Select component.

[michaldudak]

Thanks for the detailed report. I'll keep just the original issue open.
The fix is on its way.