jsonforms icon indicating copy to clipboard operation
jsonforms copied to clipboard

Support for `multiple` prop on `Select`

Open jchamberlain opened this issue 1 year ago • 0 comments

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

jchamberlain avatar Jun 21 '24 00:06 jchamberlain