Can't input Japanese on docusaurus-theme-search-algolia in Windows Firefox

[tats-u]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

docusaurus-theme-search-algolia has a bug to prevent from inputting Japanese in Windows Firefox.
Other languages, e.g. Chinese, may be affected, too.
Chromium-based browsers work well.

Reproducible demo

https://docusaurus.io/

Steps to reproduce

1. Install or enable a Japanese input method (e.g. Google Japanese Input)
2. Click the search bar or Ctrl + K
3. Enable Japanese input method
4. Type some Japanese search query

Expected behavior

search_edge.mp4

(Edge)

Chrome also works well.

Note: this movie uses AV1. Safari may not be supported. Edge requires an this Windows video extension.

Actual behavior

search_firefox.mp4

Input corrupted at every moment😡

Your environment

• Public source code: officia pagel
• Public site URL: official page
• Docusaurus version used: official
• Environment name and version (e.g. Chrome 89, Node.js 16.4): N/A
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows + Firefox

Self-service

• I'd be willing to fix this bug myself.

[tats-u]

https://developer.mozilla.org/docs/Web/API/Event/composed must be used to fix this problem.

This may be due to https://github.com/algolia/autocomplete

[Josh-Cena]

I cannot reproduce this in macOS Firefox, but Chinese input methods work differently and I don't know how to use the Hiragana input method... In any case, Docusaurus does not provide the search modal, so we will track algolia/autocomplete#1135 instead.

[tats-u]

@Josh-Ce I don't have a mac, but can't it be reproduced in Microsoft Pinyin in Windows parallels either? (I'll try it later in physical Windows though)

[Josh-Cena]

Unfortunately I don't have access to a Windows machine either :/

[tats-u]

fyi how to enable Japanese IME in macOS

https://redcocoon.org/cab/mysoft.html

[Josh-Cena]

Yeah I do have the Hiragana keyboard, I just never know how to use it.

[tats-u]

Seems to work well.
It may be Windows specific.

[tats-u]

I was able to test in Google Pinyin in Windows Sandbox.

googlepinyin.mp4

Input a sentence→Press backspace until all characters are deleted
While I pressed backspace, I found the search bar behaves suspiciously (as if I pressed a space).

woxihuan→[backspace]→・・・→woxih (OK until here)→[backspace]→我系 (IME closed; I can't modify pinyin anymore)

googlepinyin2.mp4

Another example (I just pressed backspace once after typing huanghe)

Google Pinyin: 下载谷歌拼音输入法 Download Google Pinyin Chinese Mandarin Pinyin Input (Direct link: Download Google Pinyin [ 标准版 ] For Microsoft Windows | GeckoandFly Server)

[tats-u]

Can macOS + Firefox input Pinyin on the field in this pen successfully?

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

[Josh-Cena]

@tats-u sorry I was quite busy for the last few weeks. Yes, the pen works for me on Mac Firefox, both using Chinese and Hiragana keyboards.

The IME closing seems unexpected, but I can't reproduce it here. Maybe it's a platform-specific issue?

[tats-u]

macOS doesn't seem to be affected. Thank you for your cooperation.

FYI in Windows:

enterkeyhint_firefox.mp4

[tats-u]

algolia/autocomplete#1135 (comment)

We will be able to fix this issue by ignoreCompositionEvents in the latest autocomplete for CJK languages.

@Josh-Cena Now that the ball is in our court, could you reopen this issue?

[Josh-Cena]

@tats-u Could you try it in your environment? Thanks!

[tats-u]

Has it been committed in main? It does not look like.

[Josh-Cena]

Ah, no, I meant if you wanted to make the code change and test it locally.

[tats-u]

I see.
I found that we still have to wait for fix of algolia/docsearch#1043 & algolia/docsearch#1304.
That attribute has not been imported into <DocSearchModal/> (@docsearch/react) yet.

We have only to add a line in packages\docusaurus-theme-search-algolia\src\theme\SearchBar\index.tsx.

Should we use useDocusaurusContext().i18n.currentLocale to check if that attribute should be designated?

[Josh-Cena]

Is there a downside to this being unconditionally applied?

[tats-u]

You may want to see:

algolia/instantsearch#5986
algolia/instantsearch#6009

It is up to your team to apply this to all locales. I am against their background, though. The detailed condition (the name of Ithe keyboard app & the language of the keyboard) is not written.
I think Gboard (English & Japanese) for Pixel works well.