MUI anyOf select title gets cropped if longer than options

[TheOneTheOnlyJJ]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5.22.4

Current Behavior

This:

Notice how for the options Option A, Option B, and Option C, the Choose Option text gets cropped and has ... added to it.
This is because the select widget length is calculated based on the options' lengths and does not account for the length of the title.

Expected Behavior

Ideally, the width of the select widget should be calculated like this: max(titleWidth, max(optionsWidths)).
Could such a small fix be made? Maybe a CSS property exists for this?
If Material UI does not allow such title length calculation, I will also open an issue there.

Steps To Reproduce

A simple anyOf schema with subschemas having titles shorter than the select title.

[heath-freenome]

@TheOneTheOnlyJJ I've faced this problem myself and built an extension of the TextField to add the title to the label when it is cropped. Right now we don't have an easy way of targeting the one-of component, but it would be pretty easy for us to add one. Then you could apply a targeted CSS solution for this. I also would suggest writing an issue with MUI to see if they can help you provide a fix

[TheOneTheOnlyJJ]

@TheOneTheOnlyJJ I've faced this problem myself and built an extension of the TextField to add the title to the label when it is cropped. Right now we don't have an easy way of targeting the one-of component, but it would be pretty easy for us to add one. Then you could apply a targeted CSS solution for this. I also would suggest writing an issue with MUI to see if they can help you provide a fix

As you suggested, I've opened mui/material-ui#45276.
Once a solution gets found there, I believe we can simply copy & paste it in RJSF's MUI anyOf and oneOf code. I say this because I expect the solution to be some CSS styling formula applied to the widget. Such a solution is a lot more likely than a new prop.