Windows Firefox Japanese input get broken

[tats-u]

Description

• Can't input Japanese on docusaurus-theme-search-algolia in Windows Firefox facebook/docusaurus#8952
• Can't input Japanese in Windows Firefox cmfcmf/docusaurus-search-local#185

Reproduction

https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/

Steps

1. Click the 2nd search bar (1st one works well)
2. Input some alphabets or numbers
3. Turn Japanese IME on
4. Try to input Japanese
5. Input canceled

ime_canceled.mp4

Expected behavior

↓Search bar just above

autocomplete_success.mp4

Other browsers (Chromium-based) work well.

Environment

• OS: Windows
• Browser: Firefox (Chrome & Edge work well)
• Autocomplete version: [e.g. 1.0.0]

[tats-u]

I found the enterkeyhint attribute of the <input> element is changed from search to go at the moment my IME is interrupted.

[Haroenv]

I believe #901 may fix this, can you check that @tats-u ?

[tats-u]

It's plan is not so different, but its current change is not effective on this issue.

[tats-u]

It's required to consider isComposing to fix this issue, too, though.

[tats-u]

https://codepen.io/tats-u/pen/KKGXxEM

enterkeyhint_firefox.mp4

(↓Chrome)

enterkeyhint_chrome.mp4

[tats-u]

Maybe a bug of Firefox
https://bugzilla.mozilla.org/show_bug.cgi?id=1831015

[FabienMotte]

Hello @tats-u, thanks for reporting this issue!

I can't replicate the issue on my end, using Firefox v112.0.2 and OSX 12.6.3 with a Japanese (Romaji) keyboard. Am I replicating the steps correctly?

Seems to be specifically related to Firefox for Windows.

Screen.Recording.2023-05-03.at.16.16.32.mov

Thank you!

[tats-u]

If you can input hiraganas other than あ, い, う, え, and お, your browser isn't affected.
E.g. "た" is composed of T + A, so if the browser were affected, it'd be "ｔあ".

I found Android is also affected.
Linux is unknown as of now. Not affected (Ubuntu 20.04)
iOS Firefox is not Gecko but WebKit.

[tats-u]

Available choices:

• Suppress the change of enterkeyhint while composing (we can choose whether we enable this behavior in response to the user agent; if there is "Safari" or "Mac OS X", not affected)
• Wait until Firefox might fix this bug

[Haroenv]

I believe the new approach in #901 may fix this, can you try the deploy preview once it runs?

[tats-u]

I think it's effective.
It won't spoil the search experience unless how kanji's are read and how hiragana's and katakana's are spelled into romaji are taken into.

E.g.

Google knows the relations: 検索→けんさく→kensaku & 腱鞘炎→けんしょうえん→kensho(u)en
Suggests while composing don't make sense until the search engine doesn't understand relations like above.

[tats-u]

CodeSandBox CI is not latest.
Do you know how to make it rebuild?
And all other than @algolia/autocomplete-example-react-renderer don't work.

[FabienMotte]

@tats-u It should be good now!

[tats-u]

CodeSandBox isn't still fresh and I can't try; diff looks great though

[FabienMotte]

@tats-u This CSB for example should be up to date: https://codesandbox.io/s/algolia-autocomplete-example-starter-c1s0ln
From: https://ci.codesandbox.io/status/algolia/autocomplete/pr/901/builds/376021

[tats-u]

@FabienMotte I'm afraid it's been NEVER improved AT ALL.
R and A (あ) mustn't be disjointed like this.

not_improved.mp4

What I've modified is just appending of the 3rd entry.

https://codesandbox.io/s/algolia-autocomplete-example-starter-forked-sdo4b3?file=/app.tsx

[TheKonka]

Meeting the same problem when input chinese in Windows Firefox. Avoid the change of enterkeyhint seems can solve the problem at present.

autocomplete/packages/autocomplete-core/src/getPropGetters.ts

Lines 187 to 189 in a76b914

	const enterKeyHint =
	props.enterKeyHint ||
	(activeItem?.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search');

[aymeric-giraudet]

Seems to work well on Firefox as well, here with Pinyin, I believe it would be the same for Japanese with romaji :

Screen.Recording.2024-01-03.at.17.26.41.mov

I can only test on Mac though so if you could try on Windows please @TheKonka, you can try right there : https://codesandbox.io/s/algolia-autocomplete-example-react-renderer-lt4cr9

[TheKonka]

@aymeric-giraudet I've tested it on window, no problem, it's great!

[tats-u]

@aymeric-giraudet Now works well in Windows + Firefox + Google Japanese Input.

[tats-u]

I am looking forward to the release of v1.13.1.

[Haroenv]

We've found a regression in InstantSearch which uses the same code, where "text suggestions" in Samsung phones unfortunately don't correctly search anymore, so we'll fix that first

[tats-u]

That is bad news but I am looking forward to a fix.

[Haroenv]

Of course if you don't support Samsung, you can still rely on the already shared patch, but as we reverted the fix, I'll reopen this until it's back

[tats-u]

Track: algolia/instantsearch#5986

[dhayab]

Hi, you can now update to autocomplete v1.15.1 and set the ignoreCompositionEvents option in order to ignore input events during a composition session.