Autocomplete does not blur when selecting item

[kamami]

NextUI Version

2.4.2

Describe the bug

Input of Autocomplete component does not blur when selecting an item from the popover. Using a ref in inputProps to blur manually throws an error when hovering over the popover.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Just test the example in the docs. There it is also not blurring the input.

Expected behavior

I would expect that the input of Autocomplete gets blurred when selecting an item from the popover.

Screenshots or Videos

No response

Operating System Version

macOs

Browser

Chrome

[linear]

ENG-1080 Autocomplete does not blur when selecting item

[wingkwong]

That's by design.

[kamami]

But how can this be then achieved? I can not pass a ref to the input.

[wingkwong]

you may pass the ref to autocomplete component instead of passing to inputProps. The ref will be forwarded to input.

<Autocomplete ref={ref}> 
...
</Autocomplete>

[kamami]

I tired it an this makes things even worse. With this the input does not blur neither and the popover does not even disappear.

Bildschirmaufnahme.2024-07-01.um.10.23.32.mov

This is the code:

export default function Search({ nodes, setNodes }) {
  const inputRef = useRef(null);

  return (
    <Autocomplete
      ref={inputRef}
      label="Suche"
      placeholder="Suche eine Person"
      onSelectionChange={(key) => {
        if (inputRef.current) {
          inputRef.current.blur();
        }
      }}
    >
      {nodes.map((person) => (
        <AutocompleteItem key={person.id} value={person.id}>
          {person.data.label}
        </AutocompleteItem>
      ))}
    </Autocomplete>
  );
}