Unable to type with some Chinese IMEs in filterable selects on Firefox Mobile

[gudzpoz]

Describe the bug

It is a very peculiar behavior I observed happening only with a Firefox Mobile browser and some Chinese IMEs, that is, one cannot type Chinese characters into a filterable select (or tree select) on Firefox Mobile browsers.

I also tested the following setup but did not observe any problem:

• Trime (with customized Shuangpin setup) & Firefox Mobile
• Gboard Japanese IME & Firefox Mobile
• Gboard Chinese IME & Brave browser
• Gboard Japanese IME & Brave browser

Comparing the IMEs tested on Firefox Mobile, it seems:

• With Trime/Gboard Japanese IME, partial inputs (pinyin or kana) will show up in the select input boxes.
• With the ones that I cannot input Chinese, the IMEs seem to only try to emit characters after the user finishes their input.

(I also tried filterable selects in Element-plus and they work fine. So it seems not a problem within Vue or Firefox?)

无法在 Firefox 移动端以及某些中文输入法下在 filterable select 里输入内容

很奇怪，我只在安卓端 Firefox 以及某些中文输入法里重现了这种状况：在 Firefox 移动端上没法在 filterable select 中通过中文输入法输入中文。

我测试了其它浏览器和其他语言的输入法，但似乎并无法重现：

• Trime (with customized Shuangpin setup) & Firefox Mobile
• Gboard Japanese IME & Firefox Mobile
• Gboard Chinese IME & Brave browser
• Gboard Japanese IME & Brave browser

比较 Firefox Mobile 上可重现以及不可重现的四个输入法，似乎区别是：

• 没法输入的那俩不会在 select 输入框里回显输入的字母/平片假名，只有最终确认之后才会尝试把中文打进输入框里
• 可以输入的那俩，在输入过程中、确认输入的字前，Trime 会在 select 输入框里显示输入的字母，Gboard 日语输入法会显示对应的平假名。

（我也试了一下 Element-plus 的 filterable select 控件，好像输入没有问题。所以这应该不是 Vue 或是 Firefox 的问题？）

Steps to reproduce

1. Download any of the Firefox Mobile browsers
2. Open https://www.naiveui.com/en-US/os-theme/components/select#filterable.vue
3. Go to the "Filterable" demo
4. Click on either of the two selects
5. Switch to a Chinese IME after the IME panel pops up if it is not already one
6. Try to type in Chinese characters and observe that no Chinese characters end up in the select input for some IMEs

There is no CodePen/CodeSandbox link to minimal reproduction since the behavior is observed within the official demo.

1. 在安卓上下载任一 Firefox 移动端浏览器
2. 打开 https://www.naiveui.com/en-US/os-theme/components/select#filterable.vue
3. 拉到“Filterable”部分
4. 点击其中一个 select
5. 如果还没有切换到中文输入法的话，切换到中文输入法
6. 尝试输入中文，对于部分输入法，完全输入不进 select 的输入框内

我就不提供 CodePen/CodeSandbox 复现了，因为官方例子里面就可以复现。

Link to minimal reproduction

https://www.naiveui.com/en-US/os-theme/components/select#filterable.vue

System Info

#### Reproducible Setups
* Browsers:
  - Fennec Firefox 125.3.0
  - Firefox Beta 125.0b9
* Input methods:
  - Gboard (Chinese Simplified Pinyin)
  - Sogou Keyboard
* OS:
  - Android 13

Used Package Manager

npm

Validations

• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[gudzpoz]

试着 debug 了一下，找到一个 bug，但并不能解决问题。

Bug 1

Firefox 下触发上述行为的输入法会依次触发以下事件：

• compositionstart
• compositionend
• input

（另外用 Brave 试了一下，它用对应输入法只会触发 input。）

因为 compositionstart 到 compositionend 之间并没有触发 input 事件，此时下面这里的 assertion 就不对了：

https://github.com/tusen-ai/naive-ui/blob/6bea68a3a55a832dc6f90d79507cdd096ea8d0e6/src/_internal/selection/src/Selection.tsx#L298-L300

但是加上了 if (cachedInputEvent) 之后也还是输入不了。

修复上面 bug 之后观测到的行为

（复现环境与上文一致）

• 输入框为空时，无法输入中文，但是 Gboard 中文里回车可以输入英文
• 输入框里已有部分输入时，可以输入中文

事件记录：

• compositionstart: event.target.value === ''
• compositionend: event.target.value === ''
• input: event.target.value === ''

我试着用了原生 JS、用了 Vue 在 compositionstart/end 里把 event.target.value 设为 ''，但这些复现尝试里 input 事件的 event.target.value 都还是不为空。不知道和 render 会不会有关（因为在 input 事件前似乎调用了一两次 render）。 （还是说真的有可能是 Firefox 的 bug？不知道 input 事件里对应的 event.target.value 有没有什么 spec。）

另外，ignore-composition 似乎并不影响，设成 false 也还是无法输入。