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

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.