ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.72k stars 51.17k forks source link

Inconsistent Tooltip Behavior in Ant Design Select with Ellipsis Text #52626

Closed klc-delovoy closed 1 week ago

klc-delovoy commented 2 weeks ago

Reproduction link

https://codesandbox.io/p/sandbox/antd-tooltip-bug-fc3lqf

Steps to reproduce

  1. Create a Select component with long options.
  2. Use optionRender to render options with Typography.Text and ellipsis={{ tooltip: true }}.
  3. Open the dropdown, hover over a truncated option to see the tooltip.
  4. Close and reopen the dropdown.
  5. Hover over the same option again — the tooltip sometimes fails to appear, even though the text is truncated.

What is expected?

The Ant Design tooltip should consistently appear when hovering over truncated options, regardless of dropdown reopen events.

What is actually happening?

Tooltip always appears when the text is cut off.

Environment Info
antd 5.23.3
React 18
System ubuntu 22.04
Browser firefox
petercat-assistant[bot] commented 2 weeks ago

It appears that there are no other similar issues reported in the Ant Design repository besides the one you have mentioned. This might be a unique case or not widely reported yet.

To address this issue, you might consider the following workaround or steps:

  1. Check for Updates: Ensure that you are using the latest version of Ant Design, as updates might contain fixes for such issues.

  2. Re-rendering: Try forcing a re-render of the Select component when reopening the dropdown. This might help in resetting the tooltip behavior.

  3. Custom Tooltip: As a temporary solution, you could implement a custom tooltip logic that ensures the tooltip appears consistently.

If none of these solutions work, I recommend keeping an eye on the issue you reported for any updates or responses from the Ant Design team.

If you have any more questions or need further assistance, feel free to ask.

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
github-actions[bot] commented 2 weeks ago

Hello @klc-delovoy. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @klc-delovoy,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个在线重现案例 ,或者提供一个最小化的 GitHub 仓库(类似 create-react-app-antd)。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现,为什么这是必需的?

klc-delovoy commented 2 weeks ago

added Reproduction link

zombieJ commented 1 week ago

Typography.Text do not have default width. So the ellipsis style is provided by the Select. Adjust code like this to use Typography's ellipsis:

https://codesandbox.io/p/sandbox/antd-tooltip-bug-forked-6xc5ht?file=%2Fsrc%2FApp.tsx%3A22%2C19

klc-delovoy commented 5 days ago

@zombieJ Even if you remove the ellipsis from dropdownMenu Select, remove the styling from Typography.Text, and wrap it in a div with a fixed width (for example, 100px), the bug still reproduces when reopening the Select dropdown.