fix(autocomplete-js): query is reflected in the detached search button

[FabienMotte]

Summary

Currently in autocomplete-js using the detached mode:

• When the modal is closed (clicking on an item of the panel/using the cancel button/using the escape key), the query is reset.
• The detached search button (used to open the modal) doesn't reflect the current query.

Result

• In detached mode, the query is persisted in a new div with the class .aa-DetachedSearchButtonQuery.
• When the query is not empty, the placeholder .aa-DetachedSearchButtonPlaceholder is hidden.

→ CodeSandbox

Fixes #636 and #1010

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6d07470:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration
@algolia/autocomplete-example-starter (forked)	PR
react-algolia-autocomplete-2	Issue #636

[Haroenv]

this looks great to me, works as expected, and like the solution, even for long queries

[FabienMotte]

this looks great to me, works as expected, and like the solution, even for long queries

Thanks! I added a couple of CSS rules for long queries.

[sarahdayan]

Elegant solution! I left a few non blocking comments, feel free to address or not and merge 👍