fix(ui): Select dropdown caps menu height + shows empty-value option label
The kit Select now passes displayEmpty:true (so a selected value="" option like an "All" filter renders its label instead of a blank control) and MenuProps.PaperProps maxHeight:320 (so long option lists scroll inside the popover instead of listing every record). Both apply via slotProps.select and are overridable per call site. Verified app-wide: no call site regresses (audit of all 74 usages). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -18,6 +18,7 @@ export default function Select({
|
|||||||
onChange,
|
onChange,
|
||||||
options,
|
options,
|
||||||
children,
|
children,
|
||||||
|
slotProps,
|
||||||
...props
|
...props
|
||||||
}: SelectProps) {
|
}: SelectProps) {
|
||||||
return (
|
return (
|
||||||
@@ -29,6 +30,20 @@ export default function Select({
|
|||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => onChange(e.target.value)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
{...props}
|
{...props}
|
||||||
|
slotProps={{
|
||||||
|
...slotProps,
|
||||||
|
select: {
|
||||||
|
// Render the selected option's label even when its value is "" — e.g.
|
||||||
|
// an "All" filter option. Without displayEmpty MUI shows the control
|
||||||
|
// blank for an empty-string value despite it being selected.
|
||||||
|
displayEmpty: true,
|
||||||
|
// Cap the menu height so long option lists scroll inside the popover
|
||||||
|
// instead of growing to fit every record (and running off-screen).
|
||||||
|
MenuProps: { PaperProps: { sx: { maxHeight: 320 } } },
|
||||||
|
// Let callers override either default (e.g. a custom renderValue).
|
||||||
|
...((slotProps as { select?: object } | undefined)?.select ?? {}),
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{options
|
{options
|
||||||
? options.map((o) => (
|
? options.map((o) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user