redux-form-material-ui

redux-form-material-ui copied to clipboard

I'm trying to figure out how to implement multiple Select component functionality with material-ui chips. Actually i would like to see an example, because i didn't find one anywhere. Here is my code:

<FormControl fullWidth>
              <InputLabel>Shops</InputLabel>
              <Field
                name="shops" component={Select} fullWidth
                multiple format={(value) => (Array.isArray(value) ? value : [])}
                renderValue={(selected) => (
                  <div className={classes.chips}>
                    {selected.map((value) => <Chip key={value.id} label={value.name} className={classes.chip} />)}
                  </div>
                )}
              >
                {allShops.map((shop) => <MenuItem key={shop.id} value={shop}>{shop.name}</MenuItem>)}
              </Field>
</FormControl>

This code works almost fine - it renderes component, I can select and de-select shops in Menu, chips are being properly added-deleted, menu items are being properly styled as selected-deselected. But the problem begins when i load some initial values, e.g. when i have several shops assosiated with my item initially - the component renderes chips properly (there are some warnings about wrong prop type passed to Select component though), but the MENU is remaining "untouched" - there are no "selected" menu items in it, although the corresponding chips are rendered, and I have no idea how to figure this out (already asked at stackoverflow but didn't get any answers). So please can i have a proper example of how to implement this functionality?

There are examples in v5.0 branch if you're using MUI 1.0 or higher version.

I have the exact same problem here, implementing redux-form and MUI manually.

Can't find a way to make it work the proper way !