[Autocomplete] Option is no longer available but value is still being rendered

[kaykhan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When available options are removed via filterOptions, the previously selected options should also be removed.

Expected behavior 🤔

When avaialble options are removed, the previously selected options remain.

Steps to reproduce 🕹

Steps:

https://codesandbox.io/s/checkboxestags-demo-material-ui-forked-qox19g?file=/demo.tsx

1. A user selects both "Consumer Electronics" and "Fashion & Apparel" in the first main industries select box.
2. A user then selects in the second sub industries select box, "Computer & Laptops" and "Footwear". (1 from each group).
3. If a user then removes "Fashion & Apparel" from the first select box, all of the items that were selected with that category should be removed in the second select box because the filter options only displays options that are present in main industries.

Context 🔦

Display values in autocomplete, based on values that are selected in the first autocomplete, removing any options that are no longer available.

"footwear" should no longer be present as "Fashion & Apparel" (the category) has been removed via filterOptions.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.41
    Firefox: 101.0.1
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/base:  5.0.0-alpha.85
    @mui/icons-material: ^5.8.4 => 5.8.4
    @mui/lab: ^5.0.0-alpha.67 => 5.0.0-alpha.86
    @mui/material: ^5.8.4 => 5.8.4
    @mui/private-theming:  5.8.4
    @mui/styled-engine:  5.8.0
    @mui/styles: ^5.2.3 => 5.4.2
    @mui/system:  5.8.4
    @mui/types:  7.1.4
    @mui/utils:  5.8.4
    @mui/x-data-grid: ^5.12.1 => 5.12.1
    @mui/x-data-grid-generator: ^5.5.1 => 5.5.1
    @mui/x-date-pickers:  5.0.0-alpha.1
    @types/react: 17.0.38 => 17.0.38
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: 4.5.4 => 4.5.4

[mnajdova]

Thanks for the detailed description and the reproduction. I would propose using a controlled mode of the Autocomplete for this scenario. The values of the components when it is in uncontrolled mode depend on the user interactions. Changing the options is not an interaction. This is why the controlled mode exists as an escape hatch.

Even if we do decide to change the behavior, it would be a breaking change, so we would need to wait for the next major release. But for doing that, I would wait to see if there are more complains about this.