升级2.6以上版本后在部分安卓机上input使用v-model的同时有对数据格式化时光标异常

[matf5]

Version

2.6.6

Reproduction link

https://codepen.io/matf5/project/editor/ARGnKV

computed: {
    cardNoFormat: {
      get() {
        return this.cardNo.replace(/(\d{4})(?=\d)/g, '$1 ');
      },
      set(value) {
        this.cardNo = value;
      }
    }
}

Steps to reproduce

例如输入输入62148时，数据会变为6214 8

What is expected?

光标位于8后面

What is actually happening?

有问题的安卓机如vivo，华为荣耀在部分浏览器内核下（如uc）光标会卡在8前面

[daanhaitsma]

After upgrading to 2.6 or higher, the input v-model behaves differently than expected on some Android devices.

Version

2.6.6

Reproduction link

https://codepen.io/matf5/project/editor/ARGnKV

computed: { cardNoFormat: { get() { return this.cardNo.replace(/(\d{4})(?=\d)/g, '$1 '); }, set(value) { this.cardNo = value; } } }

Steps to reproduce

For example, when you enter 62148, the data will change to 6214 8.

What is expected?

The cursor is after the 8.

What is actually happening?

On some Android devices (such as Vivo and Huawei Glory) in some browser kernels (such as uc) the cursor will be stuck before of 8.

As a sidenote: I cannot reproduce on my OnePlus 6(t) using Chrome or Firefox, but can using the mentioned UC Browser. Pretty sure it's not an issue with Vue.

[matf5]

After upgrading to 2.6 or higher, the input v-model behaves differently than expected on some Android devices.

Version

2.6.6

Reproduction link

https://codepen.io/matf5/project/editor/ARGnKV

computed: { cardNoFormat: { get() { return this.cardNo.replace(/(\d{4})(?=\d)/g, '$1 '); }, set(value) { this.cardNo = value; } } }

Steps to reproduce

For example, when you enter 62148, the data will change to 6214 8.

What is expected?

The cursor is after the 8.

What is actually happening?

On some Android devices (such as Vivo and Huawei Glory) in some browser kernels (such as uc) the cursor will be stuck before of 8.

As a sidenote: I cannot reproduce on my OnePlus 6(t) using Chrome or Firefox, but can using the mentioned UC Browser. Pretty sure it's not an issue with Vue.

Thanks for helping reproduce. I think it is a browser quirks too. However, I do not know why the version '2.5.22' has not this problem but the version above '2.6.0-beta.1' can reproduce. Maybe due to the dependencies updating?

[TonyPythoneer]

https://imgur.com/a/vi2EaVk
ipad air2
5.0 (iPad; CPU OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

I can reproduce.

I think it’s implement issue. You should modify your implement method to avoid display result to affect input.
After It sets from computed is 12345, it will dispaly 1234 5. It’s right.
But it re-uses the display value 1234 5 and append 6, it will set 1234 56 in vue instance.