input 组件在 modal 中且自定义 count 插槽，并且页面频繁更新时无法正常输入中文

[xpader]

TuSimple/naive-ui version (版本)

2.32.1

Vue version (Vue 版本)

3.2.37

Browser and its version (浏览器及其版本)

Chrome 104

System and its version (系统及其版本)

Mac OS 12.4

Node version (Node 版本)

Reappearance link (重现链接)

https://codepen.io/pader/pen/YzaOOLo

Reappearance steps (重现步骤)

<template>
    <div>
        <n-button @click="showModal=true">Display</n-button>
    </div>

    <n-modal v-model:show="showModal">
        <div>
            <div>{{name}}</div>
            <n-input v-model:value="value" show-count>
                <template #count>
                    {{ value.length }} / Max
                </template>
            </n-input>
        </div>
    </n-modal>
</template>

<script>
export default {
    data() {
        return {
            name: "",
            value: "",
            showModal: false
        };
    },
    mounted() {
        setInterval(() => {
            this.name = Math.random().toString();
        }, 100);
    }
}
</script>

在以上代码中点击 Display 按钮，然后在输入框中尝试输入一些中文英文，然后就会出现输入的内容不断被覆盖，删除也删不掉会被之前的内容覆盖的情况。

Expected results (期望的结果)

正常输入内容。

Actual results (实际的结果)

输入的内容不断被之前的内容尝试覆盖。
覆盖的速度取决于 DOM 中其它元素的更新速度。
使用原生 input 组件不会有此问题。

Remarks (补充说明)

[xpader]

好像跟 show-count 也不是有必然的关系，只是关闭 show-count 出现的概率小点。

[Sepush]

setInterval(() => {
            this.name = Math.random().toString();
}, 100);

应该是这个定时器的问题

[07akioni]

这个根本原因是个 bug，onCompositionend 这个在有的时候不会被调用，通过 input event 可以部分解决这个问题

[07akioni]

重新渲染有的时候还会导致正在输入的输入法内容消失，也很奇怪，提供了个新属性规避这个

[xpader]

@Sepush 定时器是导致它出现的原因，但这是不应该的，因为定时器里修改的变量跟 input 组件没有任何关系，如果改用原生 标签就没这个问题。