The same value is selected multiple times with setState()

[hsynpsdmr]

When the page is loaded for the first time, I bring some values selected, as soon as I call setState() anywhere, the selected values are selected as many times as I use setState()

    MultiSelectContainer<String>(
      itemsDecoration: MultiSelectDecorations(
        decoration: BoxDecoration(color: Colors.grey[100], border: Border.all(color: Colors.grey[100]!), borderRadius: BorderRadius.circular(20)),
      ),
      suffix: MultiSelectSuffix(
        selectedSuffix: const Padding(
          padding: EdgeInsets.only(left: 5),
          child: Icon(
            Icons.check,
            color: Colors.white,
            size: 14,
          ),
        ),
      ),
      itemsPadding: const EdgeInsets.all(5),
      items: getStatusItem(),
      onChange: (allSelectedItems, selectedItem) {
        _selectedStatus.clear();
        _selectedStatus = allSelectedItems;
      },
    );

 List<MultiSelectCard<String>> getStatusItem() {
    List<MultiSelectCard<String>> items = [];
    for (var stt in status) {
      items.add(MultiSelectCard(value: stt, label: stt, selected: _selectedStatus.any((element) => stt == element)));
    }
    return items;
  }

The code I used on the page is above.

[CodeFoxLk]

try this

void initState() { setState(() { items = getStatusItem(); }); super.initState(); }

List<MultiSelectCard> items;

MultiSelectContainer<String>( items:items, )

[hsynpsdmr]

Unfortunately that didn't work. If there was a method like selectItem() in the controller, it would work for me.

[CodeFoxLk]

can you share the complete code ?

[CodeFoxLk]

are you expecting to do something like this?

`
class Test extends StatefulWidget {
const Test({super.key});

@OverRide
State createState() => _TestState();
}

class _TestState extends State {
@OverRide
void initState() {
setState(() {});

super.initState();

}

final status = ["A", "B", "C", "D", "E"];

var _selectedStatus = ["A", "B"];

List<MultiSelectCard> getStatusItem() {
List<MultiSelectCard> items = [];

for (var stt in status) {
  items.add(MultiSelectCard(
      value: stt,
      label: stt,
      selected: _selectedStatus.any((element) => stt == element)));
}
return items;

}

@OverRide
Widget build(BuildContext context) {
print('page rebuit');
return Scaffold(
appBar: AppBar(
actions: [
ElevatedButton(
onPressed: () => setState(() {
print('setState called');
}),
child: const Text("Set States"))
],
),
body: Container(
child: MultiSelectContainer(
itemsDecoration: MultiSelectDecorations(
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[100]!),
borderRadius: BorderRadius.circular(20)),
),
suffix: MultiSelectSuffix(
selectedSuffix: const Padding(
padding: EdgeInsets.only(left: 5),
child: Icon(
Icons.check,
color: Colors.white,
size: 14,
),
),
),
itemsPadding: const EdgeInsets.all(5),
items: getStatusItem(),
onChange: (allSelectedItems, selectedItem) {
_selectedStatus.clear();
_selectedStatus = allSelectedItems;
},
),
),
);
}
}
`

[hsynpsdmr]

Yeah. something like this. "A" and "B" are selected over and over each time setState() is triggered. Therefore, it is necessary to click more than once to deselect it.

[CodeFoxLk]

If you could share the entire code with that behavior, I would help you. and did you face that issue for the above code that I shared?

[hsynpsdmr]

Yes I am having the same issue for the above code. The only thing I changed in the code was I converted it from dynamic to string method.
The error I'm getting is valid only for selected inboxes. When you open the screen and select "C" and then call the setState() method, "C" is not affected. Only the first selected "A" and "B" are affected and are selected multiple times.

You can find the code in my project here.
A bit complicated.

[Talha345]

Same issue, pre selected items are selected twice onChange!

[mogelbuster]

I fixed this issue with this pull request, cheers! #16