So i am trying to implement a multiselect dropdown in material ui with the following conditions
The dropdown will have [0 Apples, 1 Oranges, 2 Grapes]
By default 0 Apples should be selected
None of the options can be unselected.
If 0 Apples is selected and the user selects 1 Oranges or 2 Grapes then 0 Apples will be unselected and either 1 Orange or 2 Grapes will be selected depending on what he selected.
If 1 Oranges is selected then 0 Apples will get unselected.
If 2 Grapes Is selected then 0 Apples will get unselected.
If 1 Oranges is selected 2 Grapes is selected then both of them will get selected.
If 2 Grapes is selected 1 Oranges is selected then both the will get selected.
I am having problems trying to implement the unselect logic for the following cases:
1 Oranges and 2 Grapes is selected then unselect either of them.
And i am not sure where it is not working. The variable actualNewSelectionByUser is empty because he is unselecting so i will read from actualSelected as in value of mui input. I will use this to delete the value in state. But this is not working.
Here is the code sandbox link
link to code sandbox
Here you have to update your handleChange logic.
const handleChange = (event) => {
const {
target: { value },
} = event;
let newValues;
// If the user selects "Apples" (index 0), reset the selection to only include "Apples"
if (value.includes(0)) {
newValues = [0];
}
// If the user selects "Oranges" (index 1) or "Grapes" (index 2), remove "Apples" and toggle the selected value
else if (value.includes(1) || value.includes(2)) {
newValues = value.filter(v => v !== 0); // Remove "Apples" (index 0) from the selection
}
// If the user tries to deselect the last remaining selected item, reset to "Apples"
else if (value.length === 0) {
newValues = [0];
}
// For any other case, keep the value as is
else {
newValues = value;
}
setValues(newValues);
};