Custom styled autocomplete missing some functionality

[lukebennett88]

I have an example project here:
https://codesandbox.io/s/algolia-autocomplete-fch65?file=/components/autocomplete.tsx

I've styled it with Tailwind CSS, but in doing so, I seem to have lost some functionality and I'm not sure why.

The first issue is that I cannot navigate through the list using the arrow keys (as per the Combobox spec). This doesn't seem to be the case in the CodeSandbox listed in the docs: https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-renderer so I must be doing something wrong.

I worked out that the getItemProps() function returns an object which has an aria-selected key which was being used by the CSS Algolia provides to style the selected list item. Keeping this in case someone else finds it in the future.

The second issue I had is that I cannot work out how you're removing the shadow DOM "clear button" on the input element. I can do it if I put type="text" (instead of type="search") underneath {...autocomplete.getInputProps({ inputElement: inputRef.current })} but that's not what happening in the example, and if there's a way to keep the more correct type attribute I'd rather do that (I'd replace it with a custom clear button of course).

[Haroenv]

the shadow dom input clear is removed by appearance: none; -webkit-appearance: none in the default styles @lukebennett88

[lukebennett88]

Wow, that was a lot easier than I expected. For some reason I had it in my head that this was really hard to clear so didn't even think to try that.
Thanks so much @Haroenv!