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.

Sign up for GitHub

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

Jump to bottom

[bug]: Combobox overflow text displaces dropdown icon #4101

Open
luchillo17 opened this issue Jun 25, 2024 · 1 comment · May be fixed by #6184
Open

[bug]: Combobox overflow text displaces dropdown icon #4101

luchillo17 opened this issue Jun 25, 2024 · 1 comment · May be fixed by #6184
Labels
bug Something isn't working

Comments

@luchillo17
Copy link

luchillo17 commented Jun 25, 2024 •
edited
Loading

Describe the bug

The Combobox as set up in the docs do not handle long texts in the button well, it displaces the chevron to the right to the point it disappears and it looks like a normal input instead.

Screenshot 2024-06-25 161345

Affected component/components

Combobox, Button

How to reproduce

  1. Copy the Combobox example from the docs.
  2. Change the "Select framework..." part to a long string, or select an option that has a long string.
  3. If the length of the string is bigger than the button length including the Chevron icon, it will displace the icon to the right.
  4. With a string long enough the chevron icon will be displaced so far right that it will not be visible, like in the screenshot.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browser: Google Chrome Version 126.0.6478.126
Radix UI: @radix-ui/react-popover@1.1.1

Operating System:
──────────────────────────────────────────────────────────────────────────────────────────
Platform         : linux
Distro           : Ubuntu
Release          : 22.04.4 LTS
Codename         : jammy
Kernel           : 5.15.146.1-microsoft-standard-WSL2
Arch             : x64
Hostname         : #########
Codepage         : UTF-8
Build            : 

System:
──────────────────────────────────────────────────────────────────────────────────────────
Manufacturer     : Microsoft
Model            : WSL
Version          : 2
Virtual          : true

CPU:
──────────────────────────────────────────────────────────────────────────────────────────
Manufacturer     : Intel
Brand            : Gen Intel® Core™ i9-13900KF
Family           : 6
Model            : 183
Stepping         : 1
Speed            : 
Cores            : 32
PhysicalCores    : 16
PerformanceCores : 16
EfficiencyCores  : 
Processors       : 1
Socket           : 


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues
@luchillo17 luchillo17 added the bug Something isn't working label Jun 25, 2024
@danewhitfield danewhitfield mentioned this issue Jul 6, 2024
Open
@danewhitfield
Copy link

#4191

el-frontend added a commit to el-frontend/ui that referenced this issue Dec 26, 2024
@el-frontend
fix:combobox overflow text
c9b38e7 
close shadcn-ui#4101
@el-frontend el-frontend linked a pull request Dec 26, 2024 that will close this issue
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Combobox text overflow issue with long text strings el-frontend/ui
2 participants
@luchillo17 @danewhitfield