[useAutocomplete] getOptionDisabled allows selecting disabled options

[yotam-faye]

Steps to reproduce

A reproducible demo (based on useAutocomplete section from the docs:
https://stackblitz.com/edit/react-yunupe?file=Demo.tsx

I'm adding getOptionDisabled to useAutoComplete() hook but the disabled options are selectable. The only apparent change is the addition of aria-disabled="true" attribute to the option in the DOM.

it's either:

1. My misconfiguration
2. Documentation request to state that this behavior should be implemented by the user
3. An internal change to avoid triggering onChange for disabled options

Steps:

1. Create a custom autocomplete component using useAutocomplete hook
2. Set the property getOptionDisabled in the hooks options to a function that returns true for all options
3. Run the app and select an option
4. The custom autocomplete is being closed and the disabled option is selected

import { useAutocomplete } from '@mui/base/useAutocomplete';



export default function UseAutocomplete() {
  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions,
  } = useAutocomplete({
    id: 'use-autocomplete-demo',
    options: top4Films,
    getOptionLabel: (option) => option.title,
    getOptionDisabled: () => true,
  });

  return (
    <div>
      <div {...getRootProps()}>
        <label {...getInputLabelProps()}>useAutocomplete</label>
        <input {...getInputProps()} />
      </div>
      {groupedOptions.length > 0 ? (
        <ul {...getListboxProps()}>
          {(groupedOptions as typeof top4Films).map((option, index) => {
            const { key, ...optionProps } = getOptionProps({ option, index });
            return (
              <li key={key} {...optionProps}>
                {option.title}
              </li>
            );
          })}
        </ul>
      ) : null}
    </div>
  );
}

const top4Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008,  },
];

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.13.1/bin/npm
    pnpm: 9.7.1 - ~/.nvm/versions/node/v20.13.1/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.114
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.20 
    @mui/icons-material: ^5.15.5 => 5.15.20 
    @mui/material: ^5.15.20 => 5.15.20 
    @mui/private-theming:  5.15.20 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.20 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.20 
    @mui/x-date-pickers:  6.20.1 
    @mui/x-date-pickers-pro: ^6.19.0 => 6.20.1 
    @mui/x-license-pro: ^6.0.3 => 6.10.2 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: useAutocomplete autocomplete

[ZeeshanTamboli]

2. Documentation request to state that this behavior should be implemented by the user.

Yes, you have to implement this yourself since you are using the headless useAutocomplete hook. The headless word is already mentioned in the documentation here.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @yotam-faye! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!