When initialValue is present, removing selected items in chip display does not work

[rgb1380]

I have slightly modified the included example to demonstrate the issue.

Steps:

• Add initialValue to MultiSelectDialogField
• Include chipDisplay and override onTap to delete the tapped value from the _selectedAnimals list.
• Tap on lion which is the initial value.
• 'lion' is removed from _selectedAnimals list but MultiSelectChipDisplay does not update itself.

              MultiSelectDialogField(
                initialValue: [_animals[0]],
                items: _items,
                title: Text("Animals"),
                selectedColor: Colors.blue,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(
                    color: Colors.blue,
                    width: 2,
                  ),
                ),
                buttonIcon: Icon(
                  Icons.pets,
                  color: Colors.blue,
                ),
                buttonText: Text(
                  "Favorite Animals",
                  style: TextStyle(
                    color: Colors.blue[800],
                    fontSize: 16,
                  ),
                ),
                onConfirm: (results) {
                  _selectedAnimals = results.cast<Animal>();
                },
                chipDisplay: MultiSelectChipDisplay(
                  onTap: (value) {
                    setState(() {
                      _selectedAnimals.remove(value);
                    });
                  },
                ),
              ),

[rgb1380]

Turns out that _selectedAnimals has to be returned from onTap() for this to work. Will be good if this was documented.

[OlivierRidgebase]

Thanks a lot... I had the problem and so adding a return _selectedAnimals worked for me...

[lukemadera]

I was having the same issue. After adding the return it now removes them, but it always removes them ALL, not just the one I tap. @rgb1380 and @OlivierRidgebase is it working properly for you, or does it only work if one is selected (in which case removing all the is same as removing the one that is selected)?

[OlivierRidgebase]

@lukemadera do you still have your problem, I was not on the projects where I have the Multi select. I tried today and I m able to remove one by one option

chipDisplay: MultiSelectChipDisplay(            
icon: Icon(Icons.close),
            onTap: (value) {
              setState(() {
                _selectedOptions2.remove(value);
              });
              widget.onSaved(
                _selectedOptions2,
                _descriptionLocalController.text ==
                    AppLocalizations.of(context).text(
                        "INSPECTIONS.TASK.SEGMENT.PROBLEM_LIMITATION.DESCRIPTION")
                    ? ''
                    : _descriptionLocalController.text,
              );
              return _selectedOptions2;
            },
          )```

[lukemadera]

It was a deal breaker issue so I re-built my own multi-select instead to get around this issue so I haven't tried since.

[isAlmogK]

I'm having the same issue was anyone able to fix this

[florentin89]

Here is the fix:

MultiSelectDialogField(
  initialValue: [_animals[0]],
  items: _items,
  title: Text("Animals"),
  selectedColor: Colors.blue,
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.1),
    borderRadius: BorderRadius.all(Radius.circular(40)),
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  buttonIcon: Icon(
    Icons.pets,
    color: Colors.blue,
  ),
  buttonText: Text(
    "Favorite Animals",
    style: TextStyle(
      color: Colors.blue[800],
      fontSize: 16,
    ),
  ),
  onConfirm: (results) {
    _selectedAnimals = results.cast<Animal>();
  },
  chipDisplay: MultiSelectChipDisplay(
    onTap: (value) {
      setState(() {
        _selectedAnimals.remove(value);
      });
      return _selectedAnimals; // This will fix the issue
    },
  ),
),