TextField not accept text on first click Flutter

Question

On my first page I have ListView.builder.

ListView.builder(
                 itemCount:_docLocatedLot.length,
                 itemBuilder: (context, index) => EditListTile(
                 model: _docLocatedLot[index], onChanged: (ItemsLocatedLot updatedModel) {
                 _docLocatedLot[index] = updatedModel;
            },
         ),
      )

Bellow is my source code of EditListTile, after click on edit button and click on TextField new value from keyboard not accept. After click again on TextField (second click) I can enter value in TextField.

How fix this problem?

Where is error in my code? Why I need two click to enter new value?

class EditListTile extends StatefulWidget {

  final ItemsLocatedLot model;
  final Function(ItemsLocatedLot listModel) onChanged;
  const EditListTile({super.key, required this.model, required this.onChanged});

  @override
  State<EditListTile> createState() => _EditListTileState();
}

class _EditListTileState extends State<EditListTile> {

  late ItemsLocatedLot model;
  late bool _isEditingMode;

  late  TextEditingController _subTitleEditingController;

  @override
  void initState() {
    super.initState();
    model = widget.model;
    _isEditingMode = false;
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: titleWidget,
      subtitle: subTitleWidget,
      trailing: tralingButton,
    );
  }

  Widget get titleWidget {
    return Text(
      model.lot
    );
  }

  Widget get subTitleWidget {
    if (_isEditingMode) {
      _subTitleEditingController = TextEditingController(text: model.quantity);
      return TextField(
          controller: _subTitleEditingController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            suffix: InkWell(
              onTap: () {
                _subTitleEditingController.text = '';
              },
              child: Icon(
                Icons.clear,
              ),
            ),
          )
      );
    } else {
      return Text(
        model.quantity.toString();
      );
    }
  }

  Widget get tralingButton {
    if (_isEditingMode) {
      return IconButton(
        icon: const Icon(Icons.check),
        onPressed: saveChange,
      );
    } else {
      return IconButton(
        icon: const Icon(Icons.edit),
        onPressed: _toggleMode,
      );
    }
  }

  void _toggleMode() {
    setState(() {
      _isEditingMode = !_isEditingMode;
    });
  }

  void saveChange() {
    model.quantity = _subTitleEditingController.text;
    _toggleMode();
    widget.onChanged(model);
  }
}

Answer 1

You are using InkWell inside TextField ,So

• First Click is consumed by InkWell
• Second Click is consumed by TextField

Problem causing widget

TextField
|_ InkWell

TextField(
          controller: _subTitleEditingController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            suffix: InkWell(
              onTap: () {
                _subTitleEditingController.text = '';
              },
              child: Icon(
                Icons.clear,
              ),
            ),
          )
      );

Solution

Replace InkWell with IconButton.

TextField(
          controller: _subTitleEditingController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            suffixIcon: IconButton(
              onTap: () {
                _subTitleEditingController.text = '';
              },
              child: Icon(
                Icons.clear,
              ),
            ),
          )
      );

Output: