Unable selecting Chinese character separately in search bar on macOS

[blueswen]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Chinese words can not select character separately when the search result div show up.
May be related with

1. mkdocs-material/src/assets/javascripts/browser/keyboard/index.ts

   Line 102 in 9655c3a

   return fromEvent<KeyboardEvent>(window, "keydown")

2. mkdocs-material/src/assets/javascripts/components/search/suggest/index.ts

   Line 91 in 9655c3a

   fromEvent(query, "keydown"),

3. mkdocs-material/src/assets/javascripts/components/search/query/index.ts

   Line 128 in f4f9c21

   fromEvent(el, "keyup"),

4. CompositionEvent
5. Change event fires extra times before IME composition ends facebook/react#3926

Expected behaviour

Able to selecting character when in composition status(between compositionstart event and compositionend event) with all four arrow keys and not trigger other key event.

1. When there are some search result and text still in composition status
   1. press down arrow: able to select character with Chinese IME
   2. press up arrow: nothing happen
2. When there is a search suggestions and text still in composition status
   1. press right arrow: nothing happen, the autocomplete with suggestions show trigger after compositionend event

Actual behaviour

1. When there are some search result and text still in composition status
   1. press down arrow: unable to selecting character and another same word shows up in input box
   2. press up arrow: another same word shows up in input box
2. When there is a search suggestions and text still in composition status
   1. press right arrow: autocomplete with suggestions been triggered and press down another same word before autocompleted shows up in input box

Steps to reproduce

1. This bug seems only happen on macOS.
2. Need Chinese IME to reproduce this bug. Install Chinese IME Zhuyin - Traditional (in Chinese, Traditional).
3. Go to mkdocs-material doc website and search.
4. Type 5j/, space, and jp6 with Zhuyin - Traditional IME in search bar.
5. When there is a underline under text means these words are in composition status.
6. Because 中文 has search results and suggestions, so any of press down arrow, up arrow, or right arrow those bugs could be reproduced when 中文 in composition status.

Package versions

This bug found on mkdocs-material doc website

Configuration

This bug found on [mkdocs-material doc website](https://squidfunk.github.io/mkdocs-material/)

System information

• Operating system: macOS 12.3.1
• Browser: Chrome Version 101

[blueswen]

mkdocs-search.mov

This video shows searching with 中文 (with search results) in composition status and press arrow down bug. But with other words without search results like 測試 the composition ability is working fine.

[squidfunk]

Thanks for reporting! As discussed on Gitter, I'm unable to test Chinese search, so we're going to need to solve this together. First thing I'll try is to filter keyup events between compositionstart and compositionend, as suggested.

[squidfunk]

Fixed in 95aea95. I believe that this should now work as you imagined:

Ohne.Titel.mp4

Thanks for providing the very detailed example! That really helped a lot. I'm happy to improve Chinese search support.

[squidfunk]

Released as part of 8.3.1+insiders-4.17.0.