[Question]: Clearing multiselect/dropdown on form submit

[rekaburmeister]

Question for Carbon

I have a form in a modal dialog, that contains several MultiSelect items/Dropdowns. When the form is submitted, on success, I clear the component state and close the dialog.

However, when I open the dialog again, the MuliSelect and Dropdown components have visually retained their selection. The state behind is an empty object, but the selection set is being kept in the MultiSelect component itself and therefore doesn't get cleared.

How can I clear these??

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[joshblack]

Hi there @rekaburmeister! 👋 This is a great question and I'd love to help out. Could you re-create a minimal version of your situation over in a CodeSandbox: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox and I can take a look there at what's going on 👀

[rekaburmeister]

Hi Josh, Thanks for getting back to me! I’m going to be on holiday for the next week but will put something together when I return. In the meantime we created the form on a new page instead as it was too long to be in a Modal anyway.

If you’re too excited to wait a week, the setup is very basic: have a modal dialog, add a MultiSelect or a dropdown with a state something like

const [dropDown, setDropDown] = useState({});

const onChange = (selectedItems) => {
    setDropDown(selectedItems)
}

The dropdown would call that onChange in its onChange prop. On submit, set the state to {}. And close the modal. If you open the modal again you will see that the previously selected items appear selected, but dropDown is in fact empty.

Thanks, Reka

On Thu, 18 Nov 2021 at 15:26, Josh Black @.***> wrote:

Hi there @rekaburmeister https://github.com/rekaburmeister! 👋 This is a great question and I'd love to help out. Could you re-create a minimal version of your situation over in a CodeSandbox: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox and I can take a look there at what's going on 👀

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/carbon-design-system/carbon/issues/10124#issuecomment-972969642, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6XOWPS6ULDCMAV2QVT4VTUMULI5ANCNFSM5IE3DDSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Reka

[abbeyhrt]

Hey @rekaburmeister Let us know if you were able to make a minimal version of the problem you are running into? Thank you!

[rekaburmeister]

Sorry about the delay, example added fragrant-pine-xe01l - CodeSandbox https://codesandbox.io/s/fragrant-pine-xe01l

On Mon, 6 Dec 2021 at 17:35, Abbey Hart @.***> wrote:

Hey @rekaburmeister https://github.com/rekaburmeister Let us know if you were able to make a minimal version of the problem you are running into? Thank you!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/carbon-design-system/carbon/issues/10124#issuecomment-986998895, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6XOWP5DBMHRNDH6MOMXNLUPTX7DANCNFSM5IE3DDSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Reka

[dezkareid]

If you want just clear the element you can "unmount" the dropdown and mount again, I mount a skeleton and after I mount the component again.

Other option is have the control of the items on multiselect, that feature is not on carbon yet but there is a PR for that

[abbeyhrt]

@rekaburmeister Thank you for the recreation! Given the change that @dezkareid contributed herewhere you can have full control over the items selected using the selectedItems prop, would that satisfy your need for clearing the multiselect/dropdown on submit?

[joshblack]

Going to close this out due to inactivity, feel free to comment or create a new issue and we can continue this discussion!