Support for `multiple` prop on `Select`
Is your feature request related to a problem? Please describe.
I would like to use MUI's Select component, but with the multiple flag enabled. See https://mui.com/material-ui/react-select/#multiple-select. Unfortunately, the MuiSelect component in the material renderers does not accept the multiple prop nor provide any way to pass it to the underlying Select.
Describe the solution you'd like
Locally I've added a new interface to material-renderers/src/util/theme.ts:
export interface WithSelectProps {
multiple?: boolean;
}
Then added it to the MuiSelect component:
-import { i18nDefaults, WithInputProps } from '../util';
+import { i18nDefaults, WithInputProps, WithSelectProps } from '../util';
export const MuiSelect = React.memo(function MuiSelect(
- props: EnumCellProps & WithClassname & TranslateProps & WithInputProps
+ props: EnumCellProps & WithClassname & TranslateProps & WithInputProps & WithSelectProps
) {
const {
data,
@@ -46,6 +46,7 @@ export const MuiSelect = React.memo(function MuiSelect(
config,
label,
t,
+ multiple,
} = props;
const appliedUiSchemaOptions = merge({}, config, uischema.options);
const noneOptionLabel = useMemo(
@@ -63,6 +64,7 @@ export const MuiSelect = React.memo(function MuiSelect(
value={data !== undefined ? data : ''}
onChange={(ev) => handleChange(path, ev.target.value || undefined)}
fullWidth={true}
+ multiple={multiple || false}
>
This worked perfectly for me. I'm not sure if this is the right approach, but could something like this be considered for inclusion?
Describe alternatives you've considered
MUI's Autocomplete can do some of this, but it's overly complicated for most of my use cases and it can be confusing to users who are expecting normal <select>-like behavior.
Framework
React
RendererSet
Material
Additional context
No response