naive-ui
naive-ui copied to clipboard
Unable to type with some Chinese IMEs in filterable selects on Firefox Mobile
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
- Download any of the Firefox Mobile browsers
- Open https://www.naiveui.com/en-US/os-theme/components/select#filterable.vue
- Go to the "Filterable" demo
- Click on either of the two selects
- Switch to a Chinese IME after the IME panel pops up if it is not already one
- 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.
- 在安卓上下载任一 Firefox 移动端浏览器
- 打开 https://www.naiveui.com/en-US/os-theme/components/select#filterable.vue
- 拉到“Filterable”部分
- 点击其中一个 select
- 如果还没有切换到中文输入法的话,切换到中文输入法
- 尝试输入中文,对于部分输入法,完全输入不进 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.