fix(setSearchBoxValue): reset searchbox before editing

[tkrugg]

In React and Preact the CLEAR selenium instruction does not fire any event, and therefore does not update the component's internal state (see this job for example: https://app.saucelabs.com/tests/4518f96fdfd447e998786d0ff463658a#54)

It is equivalent to input.value = ''.

There are multiple sources reporting a similar behaviour (see SeleniumHQ/selenium#6741)

Since this change: algolia/instantsearch#4202

<input value={state.query} />

instead of

<input value={props.query} />

Since binding the input value to a state.query (rather than a props.query), it appears the click we use to focus on the searchbox re-syncs input.value with state.query.

Demonstration of the issue:

• Before fix(queryHook): restore behaviour of queryHook instantsearch#4202:
  
• After fix(queryHook): restore behaviour of queryHook instantsearch#4202:
  

[Haroenv]

Does this mean that since your PR in InstantSearch, you will no longer be able to set the value externally?

[tkrugg]

@Haroenv you were never able to, the component always worked in a controlled way.

Only the clear instruction of selenium uses input.value, the rest is actual typing and sends change events. Relevant part of webdriver.io codebase supporting this are: setValue, clearValue, elementClear, addValue, elementSendKeys, elementSendKeys spec in JSON Wire Protocol.

• When the value was bound to props.query there was a window where one could change input.value. Our e2e test took advantage of this.
• With value being bound now to state.query that window is much smaller. Our e2e could .value="" but as soon as we focused on the element, the value was synced again with the state.

[tkrugg]

I ran the current PR on vue-instantsearch@develop, react-instantsearch@master and instantsearch.js@develop and it's working!