[joy-ui][Select] Support selection of multiple options
#39454
Conversation
sai6855
added
new feature
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
|
|
||
| const [SlotRoot, rootProps] = useSlot('root', { | ||
| ref: handleRef, | ||
| className: classes.root, | ||
| elementType: SelectRoot, | ||
| externalForwardedProps, | ||
| ownerState, | ||
| ownerState: ownerState as SelectOwnerState<any, boolean>, |
There was a problem hiding this comment.
I tried to improve this but failed 😣. TypeScript is one of the reasons I try to avoid components with union value type 🥲. It's really hard to get it right.
Thanks for working on this!
There was a problem hiding this comment.
I feel you, types in this PR tested my patience 😅
| Note that in multiple selection mode, the `value` prop (and `defaultValue`) is an array. | ||
|
|
||
| {{"demo": "SelectMultiple.js", "defaultCodeOpen": false}} | ||
|
|
There was a problem hiding this comment.
I suggest to add a couple of more demos:
#### Selected value appearance
Display avatars of selected users end with "x friends".
#### Form submission
Show what the value looks like after submitted a form.
sai6855
force-pushed
the
select-multiple-joy
branch
from
d1e9cf2
to
41c2327
Compare
| renderValue={(selected) => ( | ||
| <Box sx={{ display: 'flex', gap: '0.25rem' }}> | ||
| {selected.map((selectedOption) => ( | ||
| <Chip variant="outlined" color="success"> |
There was a problem hiding this comment.
| <Chip variant="outlined" color="success"> | |
| <Chip variant="soft" color="primary"> |
I think it looks better than outlined and success.
There was a problem hiding this comment.
Agreed, I'll update
sai6855
force-pushed
the
select-multiple-joy
branch
from
eef1cb2
to
db94277
Compare
sai6855
force-pushed
the
select-multiple-joy
branch
from
db94277
to
ddac565
Compare
|
@siriwatknp PR is ready for review, added demos as suggested |
| onSubmit={(event) => { | ||
| event.preventDefault(); | ||
| const formData = new FormData(event.currentTarget); | ||
| const formJson = Object.fromEntries(formData.entries()); |
There was a problem hiding this comment.
It is strange that formJson.pets is a string, not an array. Is this expected?
I got "[\"dog\"\" instead of ["dog"].
There was a problem hiding this comment.
When you console.log On logging formJson.pets it indeed prints array, so issue you described maybe have to do something with alerttypeof formJson.pets i'm getting type as string. Ideally It should be object, let me check
There was a problem hiding this comment.
Is this expected?
Yes, this is expected because if Select has multiple prop then value of hidden input is stringified. so users need to do JSON.parse to convert it to array.
material-ui/packages/mui-base/src/useSelect/useSelect.ts
Lines 51 to 57 in a731e86
So I've modified demo and parsed string to array. Now demo is looking good
sai6855
changed the title
multiple propmultiple options
|
@siriwatknp Can this be merged ? |
siriwatknp
changed the title
multiple optionsmultiple options
closes: #39102
preview: https://deploy-preview-39454--material-ui.netlify.app/joy-ui/react-select/#multiple-selections