[material-ui][Autocomplete] broke backward compatibility with loading state

[nekoya]

Steps to reproduce

Call the component like below.

function Selector() {
    return (
        <Autocomplete
            loading={true}
            options={['foo', 'bar']}
            renderInput={(params) => <TextField {...params} />}
        />
    );
}

Current behavior

When open the Autocomplete, the expand icon rotated, but no items display.

The case loading && groupedOptions.length > 0 is not being handled in the current implementation.

Expected behavior

Display options (former behavior) or loading message (I think it is more proper one).

Context

This change was introduced by #41300

Current behavior cause a problem with the code like below.

const foo = useFoo(); // fast query
const bar = useBar(); // slow query
return (
  <Autocomplete
    loading={foo.isLoading || bar.isLoading}
    options={[...new Set([...foo.data, ...bar.data])]}
    renderInput={(params) => <TextField {...params} />}
  />
);

While foo is loaded and bar is still loading, I expect the loading message to be displayed. However, it does not appear, and then all items are displayed after bar has loaded.

Your environment

  System:
    OS: macOS 13.6.3
  Binaries:
    Node: 20.10.0 - ~/.nodebrew/current/bin/node
    npm: 10.2.3 - ~/.nodebrew/current/bin/npm
    pnpm: 8.15.5 - ~/.nodebrew/current/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/icons-material: 5.15.14 => 5.15.14
    @mui/lab: 5.0.0-alpha.169 => 5.0.0-alpha.169
    @mui/material: 5.15.14 => 5.15.14
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styles: 5.15.14 => 5.15.14
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @types/react: 18.2.69 => 18.2.69
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Search keywords: Autocomplete loading

[ZeeshanTamboli]

I agree it's a bug.

Edited: Reverting to the previous state where options were displayed even when loading is true doesn't seem logical to me. It should just show "Loading" when the autocomplete is loading, as in your PR. (I am not 100% sure about this).

For now, let's revert to the previous state where options are shown. I believe this change was done because options should only be passed to the options prop when loading is complete. If there are static options available, they should take precedence over the Loading state.

[nekoya]

Thanks a lot. I agree with you to restore the previous behavior, at least for now.

If possible, It would be nice to have a test case for this behavior, isn't it?

[mjchang]

Are there plans to release a v5 version to fix this?

[ZeeshanTamboli]

@mjchang Yes, here's the PR that should be merged for v5: #41677.