CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
nvancouver
nvancouver

Reputation: 147

React - MUI - cannot deselect all items in multi select

I'm working with the MUI "multiple select" / "multiple checkbox select".

My goal -> Open a modal, setState some initial value, and then have full control over the select.

My issues -> Currently, the initial items can be reselected, and once they are selected they cannot be unselected.

Here is a code sandbox forked from a MUI issue relating to this MUI issue

As of now -> I have included 3 sets of state in the sandbox

newOptions is equal to [options[1]]

1 - value: [options[1]]  -> Success
2 - value: options.slice(0,1)  -> Success
3 - value: newOptions  -> Failure

By un-commenting the different states you can see the behavior described, and the items will not be removable from the multi-select.

I'm wondering if anyone can describe this behavior and the solution to it => although I have been able to find some success (using [options[x]]) however this does not support what I am doing in my project.

Upvotes: 2

Views: 2297

Answers (1)

Eric
Eric

Reputation: 1357

As commented in https://github.com/mui-org/material-ui/issues/16775, You can kind of fix this by using the reference of the object as the default value e.g. https://codesandbox.io/s/create-react-app-vgyz6

When using the reference of the object, the select component by default is using the reference equality check I think, so deselection is working.

When you use the third way, "3 - value: newOptions -> Failure", in Javascript, even the properties and values of 2 objects are identical, yet the objects themselves aren't considered equal.

var jangoFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var bobaFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

// Outputs: false
console.log(bobaFett === jangoFett);

Upvotes: 3

Related Questions