naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

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

Open gudzpoz opened this issue 8 months ago • 1 comments

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

gudzpoz avatar Jun 12 '24 04:06 gudzpoz