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

[onderakbulutV]

Fixed the issue where selecting "+ Add new item" doesn't close the overlay with single selection.

The problem was in [AutocompleteMenu.tsx] - when [addNewItem] was clicked, the [onAction] handler only handled the multiple selection variant case but didn't close the overlay for single selection.

Solution: Added the same behavior used for regular item selection to the [addNewItem] action handler:

`onAction: (item: T) => { addNewItem.handleAddItem({...item, id: item.id || generatedUniqueId, leadingVisual: undefined})

if (selectionVariant === 'multiple') { setInputValue('') setAutocompleteSuggestion('') } else { setShowMenu(false) // Close overlay inputRef.current?.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length) } },`

This ensures the overlay closes and provides a consistent UX when adding new items with single selection variant.

[jonrohan]

Thanks @onderakbulutV! Is there any docs updates that you think would help make this clearer? https://primer.style/product/components/autocomplete/#adding-new-items-from-input