Last selected item in multi-select autocomplete prefills input on external click about choc-autocomplete

[Hagriel]

the same in this example https://codesandbox.io/p/devbox/chakra-autocomplete-demo-jrk70

[Kysluss]

Hi @Hagriel !

If you add restoreOnBlurIfEmpty={false} to the AutoComplete component, it will change this behavior. Below is an updated version of the component you're seeing in that codesandbox. Let me know if that works for you and I'll close this issue. If not, let me know how I can help and I'll take another look.

export default function App() {
  const countries = [
    "nigeria",
    "japan",
    "india",
    "united states",
    "south korea",
  ];
  return (
    <Stack direction="column">
      <Text>Multi select with tags</Text>
      <AutoComplete openOnFocus multiple onChange={(vals) => console.log(vals)} restoreOnBlurIfEmpty={false}>
        <AutoCompleteInput placeholder="Search..." variant="filled">
          {({ tags }) =>
            tags.map((tag, tid) => (
              <AutoCompleteTag
                key={tid}
                label={tag.label}
                onRemove={tag.onRemove}
              />
            ))
          }
        </AutoCompleteInput>
        <AutoCompleteList>
          {countries.map((country, cid) => (
            <AutoCompleteItem
              key={`option-${cid}`}
              value={country}
              textTransform="capitalize"
              _selected={{ bg: "whiteAlpha.50" }}
              _focus={{ bg: "whiteAlpha.100" }}
            >
              {country}
            </AutoCompleteItem>
          ))}
        </AutoCompleteList>
      </AutoComplete>
    </Stack>
  );
}

[Hagriel]

Hi @Kysluss
It's works
Thank you

[Kysluss]

Not a problem at all. I'll go ahead and close this issue for now, but feel free to open a new one if anything else pops up.