Autocomplete `groupBy` breaks after creating a new option when all existing options are selected (regression in 7.3.11)

[mchollangi-cr]

Steps to reproduce

Current behavior

After upgrading from @mui/material 7.3.9 to 7.3.11, Autocomplete throws an exception when using:

• multiple={true}
• groupBy
• dynamically adding a new option
• filterSelectedOptions
• all existing options are already selected

The issue occurs when a new option is created (e.g. on Enter or blur) and becomes the only remaining option in the list because all other options are filtered out as selected.

Error:

Cannot read properties of undefined (reading 'map')

Reason :

https://github.com/mui/material-ui/pull/48327/changes

The exception originates from the grouped rendering path inside Autocomplete.

Expected behavior

When groupBy is enabled, newly created options should be processed through the grouping pipeline in the same way as existing options.

The grouped rendering path should receive grouped option objects:

[
  {
    group: 'All',
    options: [...]
  }
]

and should not receive raw option objects.

Actual behavior

After creating a new option, the grouped rendering path receives a raw option:

[
  {
    id: 'asd',
    name: 'asd'
  }
]

while still executing logic that assumes grouped data:

if (groupBy) {
  return renderGroup({
    key: option.key,
    group: option.group,
    children: option.options.map(...)
  });
}

Since the option is not grouped:

option.options === undefined

which causes:

Cannot read properties of undefined (reading 'map')

Reproduction conditions

The issue reproduces only when all of the following are true:

• multiple={true}
• groupBy is provided
• filterSelectedOptions is enabled
• all existing options are selected
• a new option is created dynamically

Example flow:

1. Initial options:

[
  { id: 1, name: 'A', is_recent: false },
  { id: 2, name: 'B', is_recent: true }
]

2. Select all options.
3. Create a new option:

{
  id: 'asd',
  name: 'asd',
  is_recent: false
}

4. Autocomplete crashes.

Additional observations

• The issue does not reproduce when at least one original option remains unselected.
• Removing groupBy completely resolves the issue.
• The same application code works correctly in 7.3.9.
• The issue appears after upgrading to 7.3.11.
• Debugging indicates that the grouped rendering path is executed while the rendered options array contains raw options instead of grouped options.

Suspected cause

The issue appears related to grouped option caching/rendering logic introduced around:

const renderedOptions = popupOpen
  ? groupedOptions
  : previousGroupedOptionsRef.current;

During the create-option flow, a non-grouped options array seems to be cached or reused, while the grouped rendering path is still executed.

Search keywords: Grouping issue, Autocomplete grouping rendering issue.

[mj12albert]

@mchollangi-cr I can reproduce this with a simpler case, would you mind sharing a repro (e.g. in Stackblitz) of your setup (with creatable options) so I can test the fix

Update: here's an attempt at a repro based on the description https://stackblitz.com/edit/untrcq7j?file=src%2FDemo.tsx

[mchollangi-cr]

@mchollangi-cr I can reproduce this with a simpler case, would you mind sharing a repro (e.g. in Stackblitz) of your setup (with creatable options) so I can test the fix

Update: here's an attempt at a repro based on the description https://stackblitz.com/edit/untrcq7j?file=src%2FDemo.tsx

@mj12albert Yeah this is the same issue i was talking about.

[navidmadannezhad]

I see this issue in my code too, if you don't mind, I'll try to fix this on a PR.