Autocomplete.Menu addNewItem doesn’t close overlay or update input value when new item is added

[Mizan-Rifat]

Description

When using the addNewItem prop in Autocomplete.Menu selecting the “+ Add new item” option doesn’t close the overlay or update the input value with the newly added item.

This results in confusing UX — the overlay stays open, and the user must manually click outside to close it.

Steps to reproduce

Render an Autocomplete with Autocomplete.Menu using the addNewItem prop, e.g.:

<Autocomplete> <Autocomplete.Input value={inputValue} onChange={setInputValue} /> <Autocomplete.Overlay> <Autocomplete.Menu aria-labelledby="autocompleteLabel-add-new" selectedItemIds={[]} addNewItem={ inputValue && !items.map(item => item.text).includes(inputValue) ? { text: inputValue, id: inputValue, handleAddItem: selectedItem => { console.log('added item:', selectedItem) }, } : undefined } items={items} /> </Autocomplete.Overlay> </Autocomplete>

2. Type something not in the list.
3. Click on the“+ Add {item}”option.

Version

37.24.0

Browser

Chrome