ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

Select在支持输入的情况下(tag模式、showSearch)光标显示不对

Open fpsqdb opened this issue 4 months ago • 3 comments

Reproduction link

https://ant.design/components/select-cn#select-demo-search

这是6.1.0的效果

https://github.com/user-attachments/assets/0448488f-d504-4d70-87b5-8874a938620f

这是5.29.1的效果

https://github.com/user-attachments/assets/9573269f-7bba-4a66-9c4d-a3d4fcd47f18

Steps to reproduce

What is expected?

光标显示 I 型

What is actually happening?

光标显示小手形状

Environment Info
antd 6.1.0
React latest
System windows 11
Browser chrome latest

fpsqdb avatar Dec 09 '25 02:12 fpsqdb

这个光标显示问题是因为在 antd 6.1.0 版本,Select 组件的 input[readonly] 样式被设置为 cursor: inherit,而父容器默认是 cursor: pointer,导致只要 input 是 readonly 时,光标就变成了小手形状(pointer),而不是文本输入的 I 型光标。相关代码和修复见 PR #56067

在 tag 模式和 showSearch 模式下,input 通常不是 readonly,理论上应该显示 I 型光标。如果你遇到光标仍然是小手,可以用如下 CSS 强制修正:

.ant-select-input input[readonly] {
  cursor: text !important;
}

这样可以确保只要是 input,无论 readonly 与否,光标都显示为 I 型。如果你需要更细致的控制,可以根据实际场景调整选择器。

如果这个方法无效,可能需要检查 Select 组件实际渲染的 input 是否被错误地设置为 readonly,或者父容器的 cursor 样式是否被其他样式覆盖。相关源码和样式逻辑可以参考 select-input.ts

如需进一步定制,可以在你的项目样式里覆盖上述规则,无需修改底层源码。

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other

Chat with Dosu Open in Cursor Join Discord Share on X

dosubot[bot] avatar Dec 09 '25 02:12 dosubot[bot]

zombieJ avatar Dec 09 '25 02:12 zombieJ

Hello @fpsqdb. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @fpsqdb,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

github-actions[bot] avatar Dec 09 '25 02:12 github-actions[bot]