addTag and removeTag dont update the textfield

[MissingLinkDev]

Here is my textFieldTag code:

TextFieldTags<String>(
                textfieldTagsController: collectionsTagController,
                initialTags: widget.selectedCollections ?? [],
                textSeparators: const [','],
                validator: (String tag) {
                  if (tag.length > 20) {
                    return "Tag is too long";
                  } else if (collectionsTagController.getTags!.contains(tag)) {
                    return 'You\'ve already entered that';
                  }
                  return null;
                },
                inputFieldBuilder: (context, inputFieldValues) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                    child: TextField(
                      onTap: () {
                        collectionsTagController.getFocusNode?.requestFocus();
                      },
                      controller: inputFieldValues.textEditingController,
                      focusNode: inputFieldValues.focusNode,
                      textCapitalization: TextCapitalization.words,
                      decoration: InputDecoration(
                        isDense: true,
                        border: const OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Color.fromARGB(255, 74, 137, 92),
                            width: 3.0,
                          ),
                        ),
                        focusedBorder: const OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Color.fromARGB(255, 74, 137, 92),
                            width: 3.0,
                          ),
                        ),
                        helperText:
                            'Input tags for collections to include breadcrumb',
                        helperStyle: const TextStyle(
                          color: Color.fromARGB(255, 74, 137, 92),
                        ),
                        hintText: inputFieldValues.tags.isNotEmpty
                            ? ''
                            : "Enter tag...",
                        errorText: inputFieldValues.error,
                        prefixIcon: inputFieldValues.tags.isNotEmpty
                            ? SingleChildScrollView(
                                controller:
                                    inputFieldValues.tagScrollController,
                                scrollDirection: Axis.vertical,
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                    top: 8,
                                    bottom: 8,
                                    left: 8,
                                  ),
                                  child: Wrap(
                                      runSpacing: 4.0,
                                      spacing: 4.0,
                                      children: inputFieldValues.tags
                                          .map((String tag) {
                                        return Container(
                                          decoration: const BoxDecoration(
                                            borderRadius: BorderRadius.all(
                                              Radius.circular(20.0),
                                            ),
                                            color: Color.fromARGB(
                                                255, 74, 137, 92),
                                          ),
                                          margin: const EdgeInsets.symmetric(
                                              horizontal: 5.0),
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 10.0, vertical: 5.0),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              InkWell(
                                                child: Text(
                                                  tag,
                                                  style: const TextStyle(
                                                      color: Colors.white),
                                                ),
                                                onTap: () {
                                                  // Handle tag tap if needed
                                                },
                                              ),
                                              const SizedBox(width: 4.0),
                                              InkWell(
                                                child: const Icon(
                                                  Icons.cancel,
                                                  size: 14.0,
                                                  color: Color.fromARGB(
                                                      255, 233, 233, 233),
                                                ),
                                                onTap: () {
                                                  inputFieldValues
                                                      .onTagRemoved(tag);
                                                },
                                              )
                                            ],
                                          ),
                                        );
                                      }).toList()),
                                ),
                              )
                            : null,
                      ),
                      onChanged: inputFieldValues.onTagChanged,
                      onSubmitted: inputFieldValues.onTagSubmitted,
                    ),
                  );
                },
              ),

Here's the code Im using to add and remove tags (currently has clearTags() which works but removeTag(tag) does not update the textfield. Have tested and it returns true so Im assuming it is adding the tag but not updating

return FilterChip(
                    label: Text(collection),
                    selected: isSelected,
                    onSelected: (selected) {
                      setState(() {
                        if (selected) {
                          // Add the tag if not already present
                          if (!(collectionsTagController.getTags
                                  ?.contains(collection) ??
                              false)) {
                            // Add the tag
                            setState(() {
                              bool? results =
                                  collectionsTagController.addTag(collection);
                              debugPrint(results.toString());
                            });
                          }
                        } else {
                          // Remove the tag
                          setState(() {
                            collectionsTagController.clearTags();
                          });
                        }
                      });
                    },
                  );

[MissingLinkDev]

Figured out the change needed, used onTabSubmitted and onTagRemoved instead of addTags and removeTags....gonna leave this here for others to see as initially looking at the api add and remove seems the more obvious way to do it and would think those would call the onTagSubmitted/onTagRemoved

[max-anders]

@MissingLinkDev Thank you, your code helped me implement this!