Open zestack opened 3 weeks ago
在 Select 组件的 header 插槽里面加入输入框后,无法使用鼠标聚焦输入框,但是可以使用键盘。
<template> <n-select v-model:value="value" :options="options"> <template #header> 在这里放个输入框 <input /> 但是出 BUG 了,鼠标点击这个输入框无法聚焦输入,但是可以通过键盘的 `Tab` 键实现。 </template> <template #action> 在这里放个输入框 <input /> 就没有问题 </template> </n-select> </template>
通过控制台发现是弹出面板的 mousedown 实现影响的
https://play.vuejs.org/#eNqlVE9r1EAU/ypjPGxLu8l2KyrptviHgnqoYgUPRiRN3m6mTWaGzCS7ZdmLYGupN5Uq9NAKgngQ8VRR6pfpxu638OXfblqkHjxl3vv93p/fmzfpazeF0OMINFNrSSekQhEJKhJLFqOB4KEifRJCmwxIO+QBqSG1VoFWVsEHR41hZtMY6hFFjsUczqQigeyQxTTHVO0O+D4nj3nou5dq0xMKF4rioaA9eYpQm4dkygdFKHobC/hpkXn8zMxMk77FSBmjx7YfgS4i6U1lfkI2YNMkdDY3fHsN/NIcYOKBxVpGrhQ1oqEgEL6tAC1CWi6NiVSbPixamrBdl7KO2bwqegtd6irPnGs04u6CB7TjqczwLC0LxFBvbqnfz+QOBi0DrcJPmYgUiesBd8HHtMiwNGJUwk6OdpPdneRwqxrG6jKfrVlIxdDihOFlj3lbzUZD9NCLQhwIgClE1rhSPEipHu8WSTFtKZdc9sB2IRwjhIx+HiQH27+ffx9u/zj99f7k6PPp8evhi4/YWLJ3kLx9OaH+QxQSjDNzPVfadlIdldLDr1uTWm+Oh/ufsIHR9qvk22GyvzPa+zL68O5/qreMcpz5NRt4z3g6w9NmtXyv64Et9HXJGT6KbKesAsDBm/n2pb5y11OnpXlKCWkaRsTERkd3eGCU+I2mPn9db2JJqQzKXOjpwTqmyjYSFxLrKokPoU0756piFkF9CO+X116pbuNT6t7LfCqMoFh3jPHA2fiLf13igqSNPghBQhiDpY0xZYcdUDm8vLoCPTyPQZxx5CP7AvAhSO5HaY857VbEXGy7wsu6vZsNEV/UI7ncU8BkKSptNJtGxrc0/MncvkD6pN15/Uplis9iCNOcOEAE9OY1bfAHdVytqA==
System: OS: Windows 11 10.0.26217 CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz Memory: 1.34 GB / 15.80 GB Binaries: Node: 21.7.1 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Chromium (127.0.2610.3) Internet Explorer: 11.0.26217.5000 npmPackages: naive-ui: ^2.38.2 => 2.38.2 vue: ^3.4.27 => 3.4.27
pnpm
描述错误
在 Select 组件的 header 插槽里面加入输入框后,无法使用鼠标聚焦输入框,但是可以使用键盘。
复现步骤
通过控制台发现是弹出面板的 mousedown 实现影响的
最小复现链接
https://play.vuejs.org/#eNqlVE9r1EAU/ypjPGxLu8l2KyrptviHgnqoYgUPRiRN3m6mTWaGzCS7ZdmLYGupN5Uq9NAKgngQ8VRR6pfpxu638OXfblqkHjxl3vv93p/fmzfpazeF0OMINFNrSSekQhEJKhJLFqOB4KEifRJCmwxIO+QBqSG1VoFWVsEHR41hZtMY6hFFjsUczqQigeyQxTTHVO0O+D4nj3nou5dq0xMKF4rioaA9eYpQm4dkygdFKHobC/hpkXn8zMxMk77FSBmjx7YfgS4i6U1lfkI2YNMkdDY3fHsN/NIcYOKBxVpGrhQ1oqEgEL6tAC1CWi6NiVSbPixamrBdl7KO2bwqegtd6irPnGs04u6CB7TjqczwLC0LxFBvbqnfz+QOBi0DrcJPmYgUiesBd8HHtMiwNGJUwk6OdpPdneRwqxrG6jKfrVlIxdDihOFlj3lbzUZD9NCLQhwIgClE1rhSPEipHu8WSTFtKZdc9sB2IRwjhIx+HiQH27+ffx9u/zj99f7k6PPp8evhi4/YWLJ3kLx9OaH+QxQSjDNzPVfadlIdldLDr1uTWm+Oh/ufsIHR9qvk22GyvzPa+zL68O5/qreMcpz5NRt4z3g6w9NmtXyv64Et9HXJGT6KbKesAsDBm/n2pb5y11OnpXlKCWkaRsTERkd3eGCU+I2mPn9db2JJqQzKXOjpwTqmyjYSFxLrKokPoU0756piFkF9CO+X116pbuNT6t7LfCqMoFh3jPHA2fiLf13igqSNPghBQhiDpY0xZYcdUDm8vLoCPTyPQZxx5CP7AvAhSO5HaY857VbEXGy7wsu6vZsNEV/UI7ncU8BkKSptNJtGxrc0/MncvkD6pN15/Uplis9iCNOcOEAE9OY1bfAHdVytqA==
系统信息
使用的包管理器
pnpm
验证