Skip to content

[Select] Auto Width title get cropped if longer than input value #45276

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
Open
TheOneTheOnlyJJ opened this issue Feb 10, 2025 · 15 comments · May be fixed by #45862
Open

[Select] Auto Width title get cropped if longer than input value #45276

TheOneTheOnlyJJ opened this issue Feb 10, 2025 · 15 comments · May be fixed by #45862
Assignees
@DiegoAndai @FGFAnderson
Labels
component: select This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@TheOneTheOnlyJJ
Copy link

TheOneTheOnlyJJ commented Feb 10, 2025 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: Take the current Auto Width Code Sandbox
  2. Replace the "Age" value of the InputLabel and the Select's label prop with "A Longer Title Than Usual"
  3. Notice the effects of the change on the component

Current behavior

Image
Image

Notice how the input label (title) gets cropped, both when it acts as content and when it is rendered above the actual input's content.

Expected behavior

The entire Select should be wide enough to fit the Title, even if the content is shorter.
The final width of the Select should be max(inputWidth, titleWidth). Right now, it appears to only be based on inputWidth.

Context

This issue is a continuation of rjsf-team/react-jsonschema-form#4484.
Finding a solution here will also fix that one.

Your environment

No response

Search keywords: select title crop too long fit length style styling input value
@TheOneTheOnlyJJ TheOneTheOnlyJJ added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 10, 2025
@TheOneTheOnlyJJ TheOneTheOnlyJJ mentioned this issue Feb 10, 2025
Open
4 tasks
@zannager zannager added the component: select This is the name of the generic UI component, not the React module! label Feb 10, 2025
@aarongarciah aarongarciah added ready to take Help wanted. Guidance available. There is a high chance the change will be accepted enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer ready to take Help wanted. Guidance available. There is a high chance the change will be accepted enhancement This is not a bug, nor a new feature labels Feb 12, 2025
@aarongarciah
Copy link
Member

Thanks for the report @TheOneTheOnlyJJ. I marked this as an enhancement and ready to take. It makes sense to me since when there's no value selected the label is visually acting as the value. Let me know what you think @DiegoAndai

@aarongarciah aarongarciah changed the title Auto Width Select's title get cropped if longer than input value [Select] Auto Width title get cropped if longer than input value Feb 12, 2025
@DiegoAndai DiegoAndai removed the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Feb 12, 2025
@DiegoAndai
Copy link
Member

I agree @aarongarciah. A question before marking it as "ready to take":

If the label is longer than the value, which one should set the width? The label or the value?

Image Image

@aarongarciah
Copy link
Member

@DiegoAndai I think the longest value should win.

@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Feb 12, 2025
@DiegoAndai
Copy link
Member

@aarongarciah great!

Added back the ready to take label in case anyone wants to work on this before the team gets to it. Please reach out if you're interested, I'll gladly guide you.

@yermartee
Copy link
Contributor

Hi @DiegoAndai I would like to work on this. Thanks in advance.

@Ashish-619
Copy link

Ashish-619 commented Feb 22, 2025 •
edited
Loading

@DiegoAndai I would like to work on this.

Need some clarification on this: Are we supposed to show the value from dropdown to the label as well?
For ex - If we select Twenty one and a Half value from the dropdown, then the upper label of the dropdown should also change accordingly to its length?

Image

@TheOneTheOnlyJJ
Copy link
Author

I would add that this issue concerns all the input elements with this shape, not just the Select. A new prop could be added to all of them.

@DiegoAndai
Copy link
Member

Hey @yermartee, go ahead. Sorry for not replying before.

@Ashish-619, thanks for the interest. I'm assigning this to @yermartee, as he asked first.

@himani-mehra
Copy link

Hi @TheOneTheOnlyJJ , I'm interested in contributing to this issue. Could you please assign it to me? Looking forward to working on it!

@yermartee yermartee mentioned this issue Mar 19, 2025
Closed
1 task
@TheOneTheOnlyJJ
Copy link
Author

Any update on this?

@yermartee
Copy link
Contributor

@TheOneTheOnlyJJ I apologize for the delay. I haven't been able to work on this yet.

If someone else is available to handle it, please feel free to do so.

@FGFAnderson
Copy link

Heya! I would like to contribute to this issue, if a maintainer has time to assign me to the this issue that would be great!

I'm assuming from @yermartee's message no one is working on this issue currently, so I'll start looking into it now.

@FGFAnderson
Copy link

It looks like most of this was resolved in #45625, I'll work from there

@aarongarciah
Copy link
Member

@FGFAnderson assigned.

@FGFAnderson FGFAnderson linked a pull request Apr 10, 2025 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DiegoAndai DiegoAndai

@FGFAnderson FGFAnderson

Labels
component: select This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[material-ui][Select] Fix autoWidth sizing with InputLabel FGFAnderson/material-ui
8 participants
@aarongarciah @DiegoAndai @TheOneTheOnlyJJ @Ashish-619 @himani-mehra @yermartee @FGFAnderson @zannager