Stop keyboard hide when click on Done button

[maheshlalu]

How to stop keyboard hide when click on done button.

[maheshlalu]

please update me

[Dn-a]

Hi @maheshlalu, would you like to hide the keyboard after inserting a tag?

[richardracz]

Hello, changing the text input action to 'next' in suggestions_textfield.dart fixed the issue for me. Surely there is a much more elegant way of doing this, but at least this seem to work for now. Good luck!

in suggestions_textfield.dart, under build/Stack/TextField

        TextField(
          controller: _controller,
          enabled: widget.tagsTextField.enabled,
          autofocus: widget.tagsTextField.autofocus ?? true,
          keyboardType: widget.tagsTextField.keyboardType ?? null,
          textCapitalization: widget.tagsTextField.textCapitalization ??
              TextCapitalization.none,
          maxLength: widget.tagsTextField.maxLength ?? null,
          maxLines: 1,
          autocorrect: widget.tagsTextField.autocorrect ?? false,
          style: widget.tagsTextField.textStyle.copyWith(
              height: widget.tagsTextField.textStyle.height == null ? 1 : null),
          decoration: _initialInputDecoration,

//Added the following line to change text input action

          textInputAction: TextInputAction.next,
          onChanged: (str) => _checkOnChanged(str),
          onSubmitted: (str) => _onSubmitted(str),
        )

[Faiyyaz]

I have done this and made a PR. waiting for approval

[lizbrownwood]

@Faiyyaz, I have the same issue. By setting the autofocus to false, the keyboard hides when I try to type in text field:

Widget addTags = Tags(
      textField: TagsTextField(
        width: 100,
        autocorrect: true,
        autofocus: false,
        suggestionTextColor: Colors.green,
        textStyle: TextStyle(
          fontSize: _fontSize,
          //height: 1
        ),
        enabled: true,
        constraintSuggestion: false,
        suggestions: [
          'car',
          'bike'
        ],
        onSubmitted: (String str) {
          setState(() {
            _items.add(str);
          });
        },
      ),
      key: _tagStateKey,
      symmetry: _symmetry,
      columns: _column,
      horizontalScroll: _horizontalScroll,
      heightHorizontalScroll: 60 * (_fontSize / 14),
      itemCount: _items.length,
      itemBuilder: (index) {
        final item = _items[index];

        return ItemTags(
          key: Key(index.toString()),
          index: index,
          title: item,
          pressEnabled: true,
          activeColor: Colors.white,
          elevation: 0,
          singleItem: _singleItem,
          border: Border.all(width: 1.0, color: Colors.grey[500]),
          splashColor: Colors.green,
          combine: ItemTagsCombine.onlyText,
          removeButton: ItemTagsRemoveButton(
            icon: Icons.clear,
            color: Colors.black,
            size: 15,
            backgroundColor: Colors.white,
            onRemoved: () {
              setState(() {
                _items.removeAt(index);
              });
              return true;
            },
          ),
          textScaleFactor:
              utf8.encode(item.substring(0, 1)).length > 2 ? 0.8 : 1,
          textStyle: TextStyle(
            fontSize: _fontSize,
          ),
          onPressed: (item) => print(item),
        );
      },
    );

[Faiyyaz]

@Faiyyaz, I have the same issue. By setting the autofocus to false, the keyboard hides when I try to type in text field:

Widget addTags = Tags(
      textField: TagsTextField(
        width: 100,
        autocorrect: true,
        autofocus: false,
        suggestionTextColor: Colors.green,
        textStyle: TextStyle(
          fontSize: _fontSize,
          //height: 1
        ),
        enabled: true,
        constraintSuggestion: false,
        suggestions: [
          'car',
          'bike'
        ],
        onSubmitted: (String str) {
          setState(() {
            _items.add(str);
          });
        },
      ),
      key: _tagStateKey,
      symmetry: _symmetry,
      columns: _column,
      horizontalScroll: _horizontalScroll,
      heightHorizontalScroll: 60 * (_fontSize / 14),
      itemCount: _items.length,
      itemBuilder: (index) {
        final item = _items[index];

        return ItemTags(
          key: Key(index.toString()),
          index: index,
          title: item,
          pressEnabled: true,
          activeColor: Colors.white,
          elevation: 0,
          singleItem: _singleItem,
          border: Border.all(width: 1.0, color: Colors.grey[500]),
          splashColor: Colors.green,
          combine: ItemTagsCombine.onlyText,
          removeButton: ItemTagsRemoveButton(
            icon: Icons.clear,
            color: Colors.black,
            size: 15,
            backgroundColor: Colors.white,
            onRemoved: () {
              setState(() {
                _items.removeAt(index);
              });
              return true;
            },
          ),
          textScaleFactor:
              utf8.encode(item.substring(0, 1)).length > 2 ? 0.8 : 1,
          textStyle: TextStyle(
            fontSize: _fontSize,
          ),
          onPressed: (item) => print(item),
        );
      },
    );

Are you trying this on simulator? Because on simulators we can use the hardware keyboard so the keyboard gets hide. And if you don't want your keyboard to hide on done, you can check my fork and clone it!

[lizbrownwood]

@Faiyyaz, no I am running it on device. The problem is with setting 'autofocus: false' when I click on the tags text field, the focus jumps on another text field.

I also tested the code without other text fields, and what happens is that the keyboards shows up for a slight moment and hides.

[Faiyyaz]

Okay. I had a different issue I didn't wanted to close the keyboard when you write and submitted a tag. I will try to check your issue later and will let you know if it happens with me too.

[Faiyyaz]

Try this code its working fine for me

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_tags/flutter_tags.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _symmetry = false;
  bool _singleItem = false;
  bool _horizontalScroll = false;
  int _column = 0;
  double _fontSize = 14;
  List _items = [];

  final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _getTagsTextField(),
            SizedBox(
              height: 20,
            ),
            TextField(
              autofocus: false,
              autocorrect: false,
              decoration: InputDecoration(
                hintText: 'Normal Text Field',
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _getTagsTextField() {
    return Tags(
      textField: TagsTextField(
        width: 100,
        autocorrect: true,
        autofocus: false,
        suggestionTextColor: Colors.green,
        textStyle: TextStyle(
          fontSize: _fontSize,
        ),
        enabled: true,
        constraintSuggestion: false,
        suggestions: ['car`', 'bike'],
        onSubmitted: (String str) {
          setState(() {
            _items.add(str);
          });
        },
      ),
      key: _tagStateKey,
      symmetry: _symmetry,
      columns: _column,
      horizontalScroll: _horizontalScroll,
      heightHorizontalScroll: 60 * (_fontSize / 14),
      itemCount: _items.length,
      itemBuilder: (index) {
        final item = _items[index];

        return ItemTags(
          key: Key(index.toString()),
          index: index,
          title: item,
          pressEnabled: true,
          activeColor: Colors.black,
          elevation: 0,
          singleItem: _singleItem,
          border: Border.all(width: 1.0, color: Colors.grey[500]),
          splashColor: Colors.black,
          combine: ItemTagsCombine.onlyText,
          removeButton: ItemTagsRemoveButton(
            icon: Icons.clear,
            color: Colors.white,
            size: 15,
            backgroundColor: Colors.black,
            onRemoved: () {
              setState(() {
                _items.removeAt(index);
              });
              return true;
            },
          ),
          textScaleFactor:
              utf8.encode(item.substring(0, 1)).length > 2 ? 0.8 : 1,
          textStyle: TextStyle(
            fontSize: _fontSize,
          ),
          onPressed: (item) => print(item),
        );
      },
    );
  }
}

[lizbrownwood]

Thanks a lot @Faiyyaz for the example. It helped me figure what was the problem and it works as it should now.

[Faiyyaz]

You're welcome @lizbrownwood. Happy to help!