Trying to use MUI with Multiselect and formik

[Mercede]

I'm trying to use multiselect dropdown for a certain list of objects in a form that is using formik and MUI. the array contains objects of type: 

 export interface IdTitlePair { id: number; title: string; } 

 declared field object like this:

 const fields = { text: 'title', value: 'id' } 

 This is how I initialized the component

and this is what I see as result

What is it I'm doing wrong?

also how do I specify the selected items from the list of all items i.e. selected items should be displayed in chips and others should only appear in the dropdow list

[Mercede]

Ok i was able to fix the issue I changed this line

dataSource={values.accounts.map(it=> ({ [`${it.id}`]: {id: `${it.id}`}, title: it.title }) )}

so all items must be in string only. numbers or other types are not acceptable. 

however the items are not select-able. they only appear in the dropdown. they are not select-able. I checked your examples and sample code. you do not set any extra properties in the multiselect dropdown. 

what am I missing?

[Sureshkumar P]

Hi Mercede, 

We have checked the MultiSelect component with shared code example, but the reported issue does not occur at our end. Also, we would like to let you know that we can assign array of object, string, and number to the MulitSelect component. But we can assign the component's value property with number array, string array boolean array types alone. We have prepared the sample and attached it below. 

API Link: https://ej2.syncfusion.com/react/documentation/api/multi-select#datasource  

https://ej2.syncfusion.com/react/documentation/api/multi-select#value  

Sample: https://stackblitz.com/edit/react-jtoynb?file=index.js  

Share the data source and value property details with us that will helps to check and proceed further from our end. 

Regards, 

Sureshkumar P. 

[Mercede]

my data source is a list of objects. here are the details:

"accounts": [

{

"id": 1,

"title": "[email protected]"

},

{

"id": 7,

"title": "[email protected]"

},

{

"id": 11,

"title": "[email protected]"

},

{

"id": 12,

"title": "[email protected]"

}

],

and this is the interface I use

export interface IdTitlePair {

id: number;

title: string;

}

rest of the code is already present in the question. there is no other manipulation being done in the code. Currenty I'm able to see the items in the list

but clicking on any item does not put them in the card form. I looked at your sample code and it is working flawlessly. Tried comparing it with my code to identify what's different that you did in demo. here is the complete code that I'm using. I have removed the unnecessary form items not relevant to the issue at hand

export function Editor(props: EditorPropsType) {

const { data } = props

const classes = useStyles()

const f = useTeamFormik(props.id??0, props.data, props.save, props.id)

const { initialErrors,

values, errors,

status, touched, isValid, isSubmitting, dirty,

handleSubmit, handleBlur, handleChange } = f

const fields = { text: 'title', value: 'id' }

return (

label="Team Name" fullWidth

helperText={touched.title && errors.title} error={touched.title && Boolean(errors.title)}

onChange={handleChange} onBlur={handleBlur} value={values.title} />

label='Description' helperText={touched.description && errors.description} error={touched.description && Boolean(errors.description)}

fullWidth multiline={true} rows={3} onChange={handleChange} onBlur={handleBlur} value={values.description} />

{ /* Select Members */}

Members

dataSource={values.accounts.map(it=> ({ [`${it.id}`]: {id: `${it.id}`}, title: it.title }) )}

// value = {values.accounts.map(x=>x.id.toString())}

// onChange={ handleChange} onBlur={handleBlur}

placeholder="Select members"

/>

{ props.onClosed?.(dirty) }} />

)

}

In the original code, value, onChange and onBlur are not commented out. but even if you comment them out, it makes no difference

[Mercede]

this is the error I noticed in console

util.js:69 Uncaught TypeError: Cannot read properties of null (reading 'id')

at getValue (util.js:69:1)

at MultiSelectComponent.DropDownBase.getFormattedValue (drop-down-base.js:284:1)

at MultiSelectComponent.MultiSelect.updateListSelection (multi-select.js:2476:1)

at MultiSelectComponent.MultiSelect.onMouseClick (multi-select.js:2648:1)

getValue @ util.js:69

DropDownBase.getFormattedValue @ drop-down-base.js:284

MultiSelect.updateListSelection @ multi-select.js:2476

MultiSelect.onMouseClick @ multi-select.js:2648

every time I click any item, this error appears in console. here is the code i was able to browse to

[Mercede]

I made the changes as per your sample code and now it does display the chips and removing or adding them. however as soon as focus is lost it crashes

<FormControl fullWidth size="medium">

<FormLabel>FencesFormLabel>

<MultiSelectComponent

id='accounts'

name='accounts'

fields={fields}

mode="Box"

dataSource={values.accounts.map((obj) => ({

title: obj.title,

id: obj.id,

}))}

value = {values.accounts.map(x=>x.id)}

onChange={handleChange}

onBlur={handleBlur}

showDropDownIcon={true}

placeholder="Select accounts"

/>

FormControl>

I think the problem is with Formik and Multiselect onChange and onBlur. I was able to find two events select and remove. I'm not sure if formik needs to be managed manually in this case by using setFieldTouched(), setFieldError() etc

[Mercede]

Finally i was able to solve the issues and made it work with Formik perfectly. 

the problem was being that data source format was {id, title} while value was number[]

and I incorrectly set the value to be {id, title}[] which caused the crash in onChange and onBlur in formik. 

Once the value was set to number[] everything worked fine. 

extremely thankful for the help and support.

this issue may be closed now.  

[Sureshkumar P]

Mercede, 

We are glad to know that the issue is resolved in your end. Please get back to us if you need further assistance on this. 

Regards, 

Sureshkumar P