Support Chakra InputGroup as option for rendering the input element about choc-autocomplete

[anubra266]

You can use the AutoCompleteInput on InputGroup just like the normal chakra Input

[jamesopti]

You can use the AutoCompleteInput on InputGroup just like the normal chakra Input

Doesn't this line always render an Input element? https://github.com/anubra266/choc-autocomplete/blob/main/src/autocomplete-input.tsx#L48-L49

How would I go about using something like this:

<InputGroup>
  <InputLeftElement
    pointerEvents="none"
    children={<PhoneIcon color="gray.300" />}
  />
  <Input type="tel" placeholder="Phone number" />
</InputGroup>

[anubra266]

Just replace <Input type="tel" placeholder="Phone number" /> with <AutoCompleteInput type="tel" placeholder="Phone number" />

[anubra266]

There's an example here

[jamesopti]

There's an example here

Thanks for the example! I realized that my issue is using multi-select with tags. In this case, the icon always stays at the top.

Here's a codesandbox fork showing the issue!

https://codesandbox.io/s/chakra-autocomplete-demo-forked-24le3?file=/src/multi-select.js

[anubra266]

Hi @jamesopti check this out

https://codesandbox.io/s/chakra-autocomplete-demo-forked-9tsov?file=/src/multi-select.js