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 algolia/docsearch#1304
Fixes algolia/docsearch#1043
Fixes #1135

[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 a883e74:

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:

algolia/docsearch#1304, algolia/docsearch#1043, #1135, #901

[dhayab]

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

[Haroenv]

yay, this is the right approach, thanks!

[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)

react-renderer.mp4

[Haroenv]

I see the compatibility layer in core makes sense here, but I wonder if it actually should be part of the react layer? I guess once that's not just an example anymore?)

[aymeric-giraudet]

You mean as user land code as there's no React layer ?
I think it's fine to just have a condition checking whether there's nativeEvent or not, doesn't add much overhead

[Haroenv]

Yes, I was thinking as user land code, but it's indeed easy to forget