tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.02k stars 1.67k forks source link

Set the focus event of the naiveui input component to open modal, click the input clear button, and clear will fail #6411

Open scw919 opened 2 hours ago

scw919 commented 2 hours ago

Describe the bug

Set the focus event of the naiveui input component to open a pop-up window, click the input clear button, and clear will fail

Steps to reproduce

1.Set the focus event of the naiveui input component to open a pop-up window, 2.Click the input clear button, and clear will fail

Link to minimal reproduction

https://codepen.io/scw919/pen/GRVpNNj

System Info

System:
  OS: Microsoft Windows 10 专业版 10.0.19042 暂缺 Build 19042
  CPU: Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz 
  Memory: 28.13 GB / 63.77 GB
Binaries:
  Node: v18.12.0
  Yarn: 1.22.17
  npm: 8.19.2
Browsers:
  Edge: Chromium (109.0.5414.120)

Used Package Manager

npm

Validations

jahnli commented 2 hours ago

使用 on-clear

scw919 commented 2 hours ago

使用 on-clear

image 这样也不行,一旦在focus事件中执行弹窗展示,清除按钮的click事件就失效了

scw919 commented 2 hours ago

focus是mousedown触发的 click在mousedown事件执行完弹窗展示后并未执行

jahnli commented 2 hours ago

不确定算算 BUG

scw919 commented 1 hour ago

不确定算算 BUG

目前我们项目中就遇到这个问题,产品是提了缺陷的,产品视角用户点击清空肯定是首先要完成清空操作的; 我目前的解决方案:1、可以通过clear-icon插槽在自定义的清除按钮上阻止冒泡,这样就不会触发focus 2、通过自定义mousedown事件,判断是否是点击了清空按钮,是的话就自己调用清空输入框绑定的值

scw919 commented 1 hour ago

不确定算算 BUG

目前我们项目中就遇到这个问题,产品是提了缺陷的,产品视角用户点击清空肯定是首先要完成清空操作的; 我目前的解决方案:1、可以通过clear-icon插槽在自定义的清除按钮上阻止冒泡,这样就不会触发focus 2、通过自定义mousedown事件,判断是否是点击了清空按钮,是的话就自己调用清空输入框绑定的值

但我还是觉得这个应该修复下,哪怕是给使用者一个可以配置的选择