Instantsearch.js: Searchbox with existing input replace the input by a new one

[maxiloc]

BUG/WEIRD behavior

https://jsfiddle.net/maxiloc/3gd97b2r/

When using the searchbox with an existing input, if the input had a value it disapears.
It seems that we are replacing the input no matter what: https://github.com/algolia/instantsearch.js/blob/develop/src/widgets/search-box/search-box.js#L45

When you have a slow connection or load a website for the first time, then start typing before instantsearch.js has been loaded:

• your query will get erased at some point
• you will loose focus because the initial input is destroyed

Could we do something to keep the initial input? that would avoid weird behaviors at page load

[iam4x]

This is an edgy case, hard to address. The fix I have in mind needs a inner state of the search-box widget but right now it's not a React component and have no easy solution for it (I've tried severals).

Before re-writing the full widget to have an inner state, I'll wait for @bobylito to come back from holidays in order to discuss of a solid solution.

It might not happen in the next version.

[bobylito]

I've tried to reproduce the issue using the jsFiddle and using network throttling to "slow 3G" and disabling cache, but I had no luck. Any chance that I missed a step here, @maxiloc ?

[maxiloc]

The js fiddle works 😄, there is "ok" as value included in the dom.
But when the js loads it does show up (you don't need to be in slow 3G). And that because the input the replaced

[Shipow]

sounds more like you don't load the critical stuff first. if the user can interact before the page loads, well, load the search first no?

[Shipow]

or load a fake placeholder, idk but i feel wrong to add more code to fix bad practices.

[maxiloc]

sounds more like you don't load the critical stuff first

No that's not the case, did you have a look a the jsfiddle ?

or load a fake placeholder, idk but i feel wrong to add more code to fix bad practices.

It's the opposite, we should not have to hack in order for it to work.

In the end it's a matter of API consistency, when we explicitly ask the widget to use an input, it should use this input and not recreate one.
Because we could have:

• binded events
• put properties
• ...

And it should not matter it is loaded.

[bobylito]

The js fiddle works 😄, there is "ok" as value included in the dom.

facepalm Ok gotcha. The widget should be able to handle this case.

[anantakrishna]

Hi there. I cannot figure out how to configure the searchBox widget to use existing input element in the docs. Can anyone suggest?

I guess this does not anymore because the widget renders own markup inside my input as of version 4.8.7:

[anantakrishna]

Here is the workaround (or the reality now) described on the forum: https://discourse.algolia.com/t/use-existing-html-form-for-searchbox-instead-of-dom-rendered-one/11861/2