tusen-ai / naive-ui

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

Select 组件的 header 插槽里面不支持输入框 #6030

Open zestack opened 3 weeks ago

zestack commented 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

验证