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

tats-u commented 1 year ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] 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

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

Expected behavior

https://user-images.githubusercontent.com/12870451/235352380-d6be7c95-c69b-489d-b8eb-d00d5ecdc499.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

https://user-images.githubusercontent.com/12870451/235352442-ccfbda41-a997-463d-8d56-26a10a3fd361.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 commented 1 year ago

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 commented 1 year ago

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 https://github.com/algolia/autocomplete/issues/1135 instead.

tats-u commented 1 year ago

@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 commented 1 year ago

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

tats-u commented 1 year ago

fyi how to enable Japanese IME in macOS

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

Josh-Cena commented 1 year ago

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

Test

tats-u commented 1 year ago

Seems to work well. It may be Windows specific.

tats-u commented 1 year ago

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

https://user-images.githubusercontent.com/12870451/235466914-83505fb2-2bad-4a77-8191-75da32a24f49.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)

https://user-images.githubusercontent.com/12870451/235468828-fecdbca5-304c-4646-bd67-8c91c5448e1b.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 commented 1 year ago

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

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

Josh-Cena commented 1 year ago

@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 commented 1 year ago

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

FYI in Windows:

https://user-images.githubusercontent.com/12870451/235846510-b8fc90b6-2ee6-44e0-8a61-1d025bb58ec0.mp4

tats-u commented 5 months ago

https://github.com/algolia/autocomplete/issues/1135#issuecomment-1916879932

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 commented 5 months ago

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

tats-u commented 5 months ago

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

Josh-Cena commented 5 months ago

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

tats-u commented 5 months ago

I see. I found that we still have to wait for fix of https://github.com/algolia/docsearch/issues/1043 & https://github.com/algolia/docsearch/issues/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 commented 5 months ago

Is there a downside to this being unconditionally applied?

tats-u commented 5 months ago

You may want to see:

https://github.com/algolia/instantsearch/issues/5986 https://github.com/algolia/instantsearch/pull/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.

facebook / docusaurus