Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overflow in <Select> component with custom tag render doesn't work #48992

Closed
frozzen10 opened this issue May 20, 2024 · 2 comments
Closed

Overflow in <Select> component with custom tag render doesn't work #48992

frozzen10 opened this issue May 20, 2024 · 2 comments

Comments

@frozzen10
Copy link

frozzen10 commented May 20, 2024

Reproduction link

Edit on StackBlitz

Steps to reproduce

You have to select the longest value.

What is expected?

Label in tag should be prevented to not be overflowed with three dots (...) at the end like with tags type without tag render prop usage.
image

What is actually happening?

Label in tag is overflowed in select input.
image

Environment Info
antd 5.15.3
React 18.2
System Windows 10 Pro
Browser Chrome version 124.0.6367.208

I believe the problem is in rc-select which renders additional span when using custom tag render.

Copy link

stackblitz bot commented May 20, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@zombieJ
Copy link
Member

zombieJ commented May 22, 2024

When you use customize tag render. You need handle the overflow style self: https://stackblitz.com/edit/react-csenqs-w9ia4a?file=demo.js,index.css

@zombieJ zombieJ closed this as completed May 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants