fix: stop processing input when composing with an IME

[dhayab]

Summary

Characters entered using an IME trigger search requests although the character composition is not done. This should only happen if the character has been fully composed.

This PR stops processing input events when composing with an IME and instead rely on the compositionend event in that case.

It also prevents keyboard inputs being processed by Autocomplete if the user is currently navigating through suggestions in an IME.

Result

Before

After

Fixes https://github.com/algolia/docsearch/issues/1304
Fixes https://github.com/algolia/docsearch/issues/1043
Fixes https://github.com/algolia/autocomplete/issues/1135

[codesandbox-ci[bot]]

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 a883e7440e9ce7809a3f8f3da6be25d39beee554:

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

[Haroenv]

once this is ready, we should add references to close:

https://github.com/algolia/docsearch/issues/1304, https://github.com/algolia/docsearch/issues/1043, https://github.com/algolia/autocomplete/issues/1135, https://github.com/algolia/autocomplete/pull/901

[dhayab]

Putting this back to draft in order to integrate #901 .

[tats-u]

This change has not been reflected in the CodeSandbox of @algolia/autocomplete-example-react-renderer yet.

[dhayab]

Hi @tats-u , thanks for your feedback. There are indeed additional changes required for the fix to work within a React environment. We'll work on those and let you know once they're released.

[aymeric-giraudet]

Hi @tats-u, thank you for your patience !

It should work with a React renderer as well now, personally tested it on both desktop and mobile and it seems to work great.

[tats-u]

@aymeric-giraudet It seems to work properly now. (To play the following video in Safari in Apple devices, you must use M3 Mac, iPhone 15 Pro, or other newer devices)

https://github.com/algolia/autocomplete/assets/12870451/fae5721a-407c-4379-b381-8ce0496127e9