Repository navigation
Could not use Chinese input method for searching on showcase #8701
Description
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 clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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
Using a Chinese input method in the search field of the showcase will result in incorrect text output and prevent the search function from operating properly.
Reproducible demo
No response
Steps to reproduce
- open website https://docusaurus.io/showcase
- Seach for site name with Input Method
Expected behavior
After selecting a candidate term, the corresponding Chinese characters will appear in the search box.
Actual behavior
After selecting a candidate term, nothing appears in the search box.
Your environment
- Public source code:
- Public site URL: https://docusaurus.io/showcase
- Docusaurus version used:
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):
Self-service
- I'd be willing to fix this bug myself.
Activity
Josh-Cena commentedon Feb 23, 2023
I think this is because the page continuously refreshes due to changing URL query, and each time the search box is programmatically re-focused. We can see what we can do, but I'm not sure whether we can let input events not fire when the text is captured by the input method. FWIW, you should not be using Chinese anyway, since the showcase is not localized.
Shake-Jarjane commentedon Mar 7, 2023
Is this submission workflow still relevant?
I feel that contributions weren't accepted since months.
rockbenben commentedon Mar 18, 2023
I've categorized the search component into two types: mobile and desktop. The search logic for the mobile remains the same; however, for the desktop with a screen width threshold of above 768px, the
debouncefunction is introduced to address the Chinese input issue. This creates two issues for the desktop: Firstly, Chinese input needs to be completed within 800 milliseconds. Secondly, there is a delay of 800 milliseconds when refreshing the search on the desktop, as it changes from being instantaneous to a delayed response.demo: https://github.com/rockbenben/ChatGPT-Shortcut/blob/fc99b18069530be82ba0e62b87524891d6a0b56c/src/pages/index.tsx#L217