Bug when using setstate in onChanged

[pedroculque]

Currently textfield clears after UI update (setState, for example). I use a timer in my app, which also updates the corresponding text widget that indicates remaining time, and UI updates every second, making input really frustrating, because every second textfield is being cleared, follow the example

TextField(
              inputFormatters: [
                MaskTextInputFormatter(
                  mask: '##/##/####',
                )
              ],
              onChanged: (value) {
                print(value);
                setState(() {
                  code = value;
                });
              },
            ),

[nk-d]

Move new MaskTextInputFormatter() outside of widget that is being updated.

[marquezea]

I have a similar issue and the MaskTextInputFormatter is already out of widget.

In my case I`m using with a TextFormField and setting an initial value with a controller.
When I put the field on focus and type backspace to clear just the last character the entire field is cleared.

Removing the mask from the field it works fine.

Here is my code to reproduce the problem.
Backspace on the name field works but in the phone field don't work properly.

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

final phoneMaskFormatter = MaskTextInputFormatter(mask: '(###) ### ####');

class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);

@OverRide
State createState() => _TestState();
}

class _TestState extends State {
final _formKey = GlobalKey();

late TextEditingController _nameController;
late TextEditingController _phoneController;

var myData = {'name': 'William', 'phone': '(305) 786 1234'};

@OverRide
void initState() {
super.initState();
_nameController = TextEditingController();
_phoneController = TextEditingController();

_nameController.text = myData['name']!;
_phoneController.text = myData['phone']!;

}

@OverRide
void dispose() {
super.dispose();
_nameController.dispose();
_phoneController.dispose();
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Form(
key: _formKey,
child: Container(
padding: EdgeInsets.all(50),
child: Column(
children: [
Text('Name: ${myData['name']}'),
Text('Phone: ${myData['phone']}'),
SizedBox(height: 100),
TextFormField(
controller: _nameController,
onChanged: (value) {
// do my stuff
setState(() {
myData['name'] = value;
});
}),
TextFormField(
controller: _phoneController,
inputFormatters: [phoneMaskFormatter],
onChanged: (value) {
// do my stuff
setState(() {
myData['phone'] = value;
});
}),
],
),
),
),
),
);
}
}

[allantivic]

I'm having a similar problem too, aparentely on insert a value by controller, the formatEditUpdate is not triggered, and getUnmask Text() return the value before you set de text by controller.

[venomanse]

I'm having a similar problem too, aparentely on insert a value by controller, the formatEditUpdate is not triggered, and getUnmask Text() return the value before you set de text by controller.

Having the same issue

[MrErkinjon]

final _phoneInputFormatter = MaskTextInputFormatter(mask: '+998 (##) ### ## ##');
I have flutter sdk 3.13.6.
The error is not formatting when pressing numbers 8 and 9 and the value is coming to emty.

[MrErkinjon]

[MrErkinjon]

Please help me

[siqwin]

The formatter has internal state. Therefore, it is required that it be moved outside the build method. If the TextEditingController of TextField has an initial value, then that value must also be specified in the formatter constructor (or later using updateMask method) so that they are initially synchronized.