Dn-a / flutter_tags

With flutter tags you can create selectable or input tags that automatically adapt to the screen width
https://pub.dartlang.org/packages/flutter_tags
MIT License
508 stars 124 forks source link

Keep focus after submit #75

Open SeriousMonk opened 3 years ago

SeriousMonk commented 3 years ago

Hi, How can I keep the focus on the TagsTextField after submitting a tag? Currently it closes the keyboard every time a tag is submitted, I'd like to keep it open. A solution would be to use a FocusNode in the TagsTextField but there is no such attribute.

Anyone knows of another way to achieve this?

ming-chu commented 3 years ago

I submitted a PR, hope this can merge. https://github.com/Dn-a/flutter_tags/pull/78

for now, you can just use this by pointing to the git path in pubspec.yaml

  flutter_tags:
    git:
      url: git@github.com:ming-chu/flutter_tags.git
      ref: feature/add-focus-after-submit
SeriousMonk commented 3 years ago

Thank you very much. Undoubtedly this is a much needed feature. I ended up just adding an external TextField after the Tags widget, and using a FocusNode to request focus after submission; like so:

FocusNode _ingredientsFocusNode = FocusNode();
TextEditingController _ingredientsEditingController = TextEditingController();

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Tags(
          itemCount: widget.list.length,
          itemBuilder: (index){
            final item = widget.list[index];

            return ItemTags(
              key: Key(index.toString()),
              index: index,
              title: item,
              textStyle: regularTextStyle,
              pressEnabled: false,
              activeColor: themeOrangeColor,
              border: Border.all(color: themeOrangeColor),
              removeButton: ItemTagsRemoveButton(
                onRemoved: (){
                  setState(() {
                    widget.list.removeAt(index);
                  });
                  return true;
                },
              ),
            );
          },
        ),
        SizedBox(height: 5),
        TextField(
          focusNode: _ingredientsFocusNode,
          controller: _ingredientsEditingController,
          style: textFieldStyle,
          decoration: InputDecoration(
              hintText: widget.hintText,
              hintStyle: hintTextStyle,
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.grey,
                      width: 0.25
                  )
              ),
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.grey,
                      width: 0.25
                  )
              )
          ),
          onSubmitted: (String val){
            setState(() {
              _ingredientsEditingController.clear();
              widget.list.add(val);
            });
            _ingredientsFocusNode.requestFocus();
          },
        )
      ],
    )
ming-chu commented 3 years ago

@FRANIAZA You can just use focusAfterSubmit: true with the PR as the following:

TagsTextField(
    autofocus: true,
    focusAfterSubmit: true,
    width: double.infinity,
    padding: EdgeInsets.symmetric(horizontal: 10),
    onSubmitted: (String str) {
      setState(() {
        this._addItem(str);
      });
    },
  )

Your solution should work too 😉