Replicating the Algolia documentation search with Autocomplete

[Ekeu]

Hello Algolia

I’m a junior developer and for the past few days I’ve been following the article Replicating the Algolia documentation search with Autocomplete you guys published on your blog.

The only difference between my implementation and the one in the article is that I used React.

I implemented mine using the article and the docs Using Autocomplete with React | Algolia Documentation 1

I’m actually facing 3 main issues which I saw wasn’t present in the final project on Codesandbox (@algolia/autocomplete-example-preview-panel-in-modal - CodeSandbox)

The issues I’m facing are:

1- When I write something in my input and click on the suggestions, the whole modal disappears

2 - When I write something in my input and click on the X button like to clear out the input the whole modal disappears

3 - When I write something in the input and then clear out everything using keyboard backspace, the right insight part (where we have the image, price and description) still stays.

In my code I juste make use of 2 main custom components which are:

AlgoliaAutocomplete

Search

Pretty sure I missed something out and I’ll be really greteful if you guys can help me out.

You can find the codesandbox I sent to the technical suppport here. Sorry for the css 😅

Thanks and have a nice day!

[francoischalifour]

Hey @Ekeu, sorry for the long delay.

I explain how to solve (1) in #611, and (2) and (3) get solved by adding openOnFocus.

I implemented the fixes in this sandbox. Let us know how it goes!

[Ekeu]

Hello @francoischalifour.

Hope you are doing great. I'm really sorry too 😃 for the late reply. After the issue I had and after waiting for a long time I decided to go on something very simple. I tried implementing it today again and I'm still facing the same issues. I came back here, accessed the sandbox but noticed that the errors have not been fixed.

I definitely think I'm just going to keep it simple.

Thanks again for your feedback

[Ekeu]

In line with my previous comment,

1- If I still click on the X button just above the cancel button, the modal still dissapears.

2- When I now click on the suggestions, the modal reacts in a strange way and it becomes impossible to write in the input area