rjsf-team/react-jsonschema-form

MUI `anyOf` select title gets cropped if longer than options

Open

#4484 opened on Feb 5, 2025

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import
bughelp wantedmaterial-ui

Description

Prerequisites

What theme are you using?

mui

Version

5.22.4

Current Behavior

This:

Image

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.

Contributor guide

Tech stack
reacttypescriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSReactMaterial UI
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Investigate the CSS/styling of the MUI Select widget in the rjsf MUI theme (likely in packages/mui/src/). The width currently only considers the options, not the title. Ensure the Select's width is at least as wide as the longest text between the title and options. Check if MUI offers a property like min width or if a custom width calculation is needed. The comments may contain further insights. No linked PRs.