<AutoCompleteInput> should be able to access the value but render the label instead

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

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

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

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

In the above example, I want the AutoCompleteList items to show up options like "Kitty 1", “Kitty 2” and so on. Now when I select any option, the value that gets set in the <AutoCompleteInput> is CAT_1 whereas I wanted “Kitty 1” to get set because that is what I chose. The only way to get around this is to make sure the value and label (child of <AutoCompleteItem>) is set as the same thing i.e. cat.label in this case, but this breaks the point of having the ability to pass a different value and child to <AutoCompleteItem>

The behaviour that is expected is similar to how any <Menu> component would work.

tldr: the value maintained internally and the value displayed/rendered should be different for the input box.

[anubra266]

@guilnorth the AutoComplete component actually has a filter prop, it accepts a function that you can use to acces the value passed to the items, and filter as you wish. It provides, the inputQuery, the itemValue and the itemLabel

[guilnorth]

Hi @guilnorth, could you explain what you mean by multiple keys to filter?

~~Maybe the possibility to pass a custom filter, for example if i need to filter by name or by email. Is a very common use case, like https://react-select.com/advanced#custom-filter-logic.~~

@icy-meteor there’s a label prop in the latest version.

Great, thank you!