The q-input component has a bug when inputting Chinese in the Mac Safari browser

[yangjiafu]

When I use the q-input component to input Chinese in the mac Safari browser, there will be repeated Chinese pinyin
https://user-images.githubusercontent.com/28332458/117227421-58c3ba80-ae49-11eb-9f7a-b16cde53c1c0.mov

This is the correct effect on the Chrome browser
https://user-images.githubusercontent.com/28332458/117227637-dc7da700-ae49-11eb-9251-0118697799c7.mov

[pdanpdan]

Hello.
Can you please try if it's fixed here: https://pdanpdan.github.io/quasar-docs/vue-components/input ?

[yangjiafu]

Yes, the problem still exists in this version

2021-05-06.4.06.38.mov

[hawkeye64]

So, pasting in is not the same as typing?

qinput-ime.mp4

[yangjiafu]

So, pasting in is not the same as typing?

qinput-ime.mp4

No, I can’t use this scheme.Because my project has hundreds of input boxes.And I cannot ask the user to do this

[pdanpdan]

@yangjiafu
I'll need a step by step procedure (in text) with what to try to reproduce.

[yangjiafu]

@yangjiafu
I'll need a step by step procedure (in text) with what to try to reproduce.

The steps are simple.

1. Use Chinese input method;
2. Input Chinese;
   And this problem exists on both iPhone and iPad;
   I found that there is no such problem in version 1.14.2;

[hawkeye64]

@yangjiafu Maybe you should explain what "Use Chinese input method" is to us Westerners :)

[pdanpdan]

I can reproduce it, I'll look into it. I think newer safari fixed some old problem it had and now the fix is breaking the correct usage

[yangjiafu]

I can reproduce it, I'll look into it. I think newer safari fixed some old problem it had and now the fix is breaking the correct usage

I hope that you can treat this problem as soon as possible.thanks.

[pdanpdan]

Don't push it, it's just work for fun, I hate Apple products and I don't have any of my own.

[yangjiafu]

@yangjiafu Maybe you should explain what "Use Chinese input method" is to us Westerners :)

Means the input typing method that can input Chinese characters with various combinations of English letters.
Just like the way you input Japanese or Korean.

[zknic]

I've found this problem.
quasar 1.15.5 has the correct effect
since quasar 1.15.6 this bug occurred
I'll download these two versions to compare the difference

[zknic]

[zknic]

this is the problem

vue solved this problem:
https://github.com/vuejs/vue/blob/v2.3.0/src/platforms/web/compiler/directives/model.js#L151-L153

but quasar do it in his own way

[pdanpdan]

Nice catch. Can you make a PR, please
Sorry, that was correct as it is.
I'm stuck, because the problem only shows on Mac Safari (not on iPhone) so there is nothing I can do.

[zknic]

Nice catch. Can you make a PR, please
Sorry, that was correct as it is.
I'm stuck, because the problem only shows on Mac Safari (not on iPhone) so there is nothing I can do.

the problem shows on iPhone especially show on iOS 14.5.1 and iOS 13

[pdanpdan]

I have iOS 14.5.1 (latest non-beta I think) and I cannot reproduce it.
I need a step by step, detailed procedure to reproduce it on iOS:

• browser (safari)
• exact keyboard (a screenshot from iOS keyboards would help
• what keys to press

[zknic]

I made a mistake ,the problem shows on iOS 14.5, and iOS 13, I'll record a video later.

[pdanpdan]

Don't bother, a video is no help.
I only have 14.5.1.
But it sounds as a problem with iOS that is fixed.
And on Mac safari it might be a similar problem - the laptop i could use to take a look had a very old macos

[panmenghan]

I have iOS 14.5.1 (latest non-beta I think) and I cannot reproduce it.
I need a step by step, detailed procedure to reproduce it on iOS:

• browser (safari)
• exact keyboard (a screenshot from iOS keyboards would help
• what keys to press

I tested it on iphone 8+, iOS 13.7/14.1, quasar v2, can reproduce it:

1. Using the cloud based iphone emulator: https://appetize.io/ (only need email to sign up)
2. After sign in, launching the virtual device, and change the default system language to "Chinese, Simplified"
3. Open the safari, using q-input, typing "nnn" will ouput "nnnnnn", and select the Chinese characters "你奶奶"(from the input method editor above the virtual keyboard) will ouput "nnnnnn你奶奶". The correct behavior, using native input, typing "nnn" will ouput "nnn", and select the Chinese characters "你奶奶" (from the input method editor above the virtual keyboard) will ouput "你奶奶";

[zknic]

it seems "setSelectionRange",caused the problem

quasar/ui/src/components/input/QInput.js

Line 209 in 903b09f

e.target.setSelectionRange(index, index)

[zknic]

quasar v2 beta has the same problem

[journeagle]

Hi, guys, one of the code puzzles me.
IME input Chinese (pinyin) is actually letters, the RegExp in the compositionupdate method is always true

[journeagle]

[pdanpdan]

Can you please try again here: https://pdanpdan.github.io/quasar-docs/vue-components/input ?
Refresh so it will show v1.15.13-beta.2 (in 10 minutes)

[zknic]

Can you please try again here: https://pdanpdan.github.io/quasar-docs/vue-components/input ?
Refresh so it will show v1.15.13-beta.2 (in 10 minutes)

it's still

[yangjiafu]

Can you please try again here: https://pdanpdan.github.io/quasar-docs/vue-components/input ?
Refresh so it will show v1.15.13-beta.2 (in 10 minutes)

this is v1.15.13-beta.1

[pdanpdan]

yep, problems with building the docs - I'll post here when it's fixed

[pdanpdan]

ok, the docs to test should be online v1.15.13-beta.2

[zknic]

ok, the docs to test should be online v1.15.13-beta.2

excellent!
The problem has been solved, i've tested on ios 13 and windows with "v-model.trim" and "IME input Chinese (pinyin)"

[yangjiafu]

ok, the docs to test should be online v1.15.13-beta.2

excellent!
The problem has been solved, i've tested on ios 13 and windows with "v-model.trim" and "IME input Chinese (pinyin)"
hello,
What is this link for this v1.15.13-beta.2 ?

[zknic]

ok, the docs to test should be online v1.15.13-beta.2

excellent!
The problem has been solved, i've tested on ios 13 and windows with "v-model.trim" and "IME input Chinese (pinyin)"
hello,
What is this link for this v1.15.13-beta.2 ?

就上面那个beat1的链接，刷新下就是2了

[yangjiafu]

ok, the docs to test should be online v1.15.13-beta.2

excellent!
The problem has been solved, i've tested on ios 13 and windows with "v-model.trim" and "IME input Chinese (pinyin)"
hello,
What is this link for this v1.15.13-beta.2 ?

就上面那个beat1的链接，刷新下就是2了

哦，好的谢啦

[yangjiafu]

ok, the docs to test should be online v1.15.13-beta.2

excellent!
The problem has been solved, i've tested on ios 13 and windows with "v-model.trim" and "IME input Chinese (pinyin)"
hello,
What is this link for this v1.15.13-beta.2 ?

就上面那个beat1的链接，刷新下就是2了

我发现这个框架的date.formatDate()插件函数在Safari浏览器下也会有问题

如果需要转换的时间有-的话在Safari浏览器下不能直接就使用Date()函数来转换

[pdanpdan]

Please keep it in English, we cannot understand Chinese (sorry if it's not Chinese)

[yangjiafu]

Please keep it in English, we cannot understand Chinese (sorry if it's not Chinese)
I found another problem.

Maybe this is not a problem, the correct format should be "YYYY-MM-DDThh:mm:ss"

[hawkeye64]

Maybe this is not a problem, the correct format should be "YYYY-MM-DDThh:mm:ss"

Having written the QCalendar app extension, I ran into this early on with Safari. It absolutely needs the 'T' separator to work. Other browsers are a bit more forgiving.

[zsjinwei]

@pdanpdan I met this issues，and I test https://pdanpdan.github.io/quasar-docs/vue-components/input this link in iphone 12(ios 14.5.1), it's fixed, when to merge to master branch？

[rstoenescu]

Fix will be available in Quasar v1.15.15 & v2.0.0-beta.17.

[chenbimo]

I have iOS 14.5.1 (latest non-beta I think) and I cannot reproduce it.
I need a step by step, detailed procedure to reproduce it on iOS:

• browser (safari)
• exact keyboard (a screenshot from iOS keyboards would help
• what keys to press

I tested it on iphone 8+, iOS 13.7/14.1, quasar v2, can reproduce it:

1. Using the cloud based iphone emulator: https://appetize.io/ (only need email to sign up)
2. After sign in, launching the virtual device, and change the default system language to "Chinese, Simplified"
3. Open the safari, using q-input, typing "nnn" will ouput "nnnnnn", and select the Chinese characters "你奶奶"(from the input method editor above the virtual keyboard) will ouput "nnnnnn你奶奶". The correct behavior, using native input, typing "nnn" will ouput "nnn", and select the Chinese characters "你奶奶" (from the input method editor above the virtual keyboard) will ouput "你奶奶";

兄弟，牛逼。这个人真是倔。