Unable to set default value to the AutoCompleteInput

  let cats = [
    { id: 'CAT_1', label: 'Kitty 1' },
    { id: 'CAT_2', label: 'Kitty 2'},
  ];

  return
  <AutoComplete openOnFocus suggestWhenEmpty rollNavigation>
    <AutoCompleteInput variant="ghost" bgColor="transparent" />

    <AutoCompleteList fontStyle="normal">
      {cats.map((cat) => (
        <AutoCompleteItem
          key={cat.id}
          value={cat.label}
          textTransform="capitalize"
        >
          {cat.label}
        </AutoCompleteItem>
      ))}
    </AutoCompleteList>
  </AutoComplete>
}

Package version “@choc-ui/chakra-autocomplete”: “^4.3.3”,

I want the default value in the input box to be set to “Kitty 1” whenever the page loads. With the above code, the input box is empty on page load which seems like the expected behaviour.

• I tried setting defaultValue to the <AutoCompleteInput> component but it doesn’t do anything.
• I tried setting value to the <AutoCompleteInput> component. It worked but whenever I focus on the input box first time and click outside the <AutoCompleteList>, the value disappears.

What is the right way to go about it?

[anubra266]

Yeah…that would work, but I should handle it internally. I’ll work on this, in a moment

[rahulsuresh-git]

I’ll try this and get back. Thanks for the quick reply.