TextFormField with number format issue on iOS only #26216

praveen-francium · 2019-01-08T04:22:03Z

Adding number format in text field in input formatter is not working properly in the iOS (when user enters values in the field fastly icurser gets triggered continuosly) and working properly in Android

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';


RegExp regexPrice = RegExp(r"[^\d]");//removes all characters and special symbols except numbers
void main(){
  runApp(MaterialApp(home: App(),));
}

class App extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyApp();
  }

}
 class MyApp extends State{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Format"),),
      body: Center(
        child: Form(child: Container(
          child: TextFormField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: "Enter Number to Format"
            ),
            inputFormatters: [
              CurrencyFormat(),
              LengthLimitingTextInputFormatter(13),
            ],
          ),
        ))
      ),
    );
  }

 }
class CurrencyFormat extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > 14) {
      return oldValue;
    }
    if (newValue.text.trim() == "S\$") {
      return newValue.copyWith(text: " ");
    } else {
      int num = int.parse(newValue.text.replaceAll(regexPrice, ''));

      final f = new NumberFormat.currency(
        decimalDigits: 0,
        symbol: "S\$" + " ",
      );
      final newString = f.format(num);
      return new TextEditingValue(
          selection: new TextSelection.fromPosition(
              new TextPosition(offset: newString.length)),
          text: newString);
    }
  }
}

FLutter doctor -v

git:(dev) ✗ flutter doctor -v
[✓] Flutter (Channel master, v1.1.6-pre.37, on Mac OS X 10.14.2 18C54, locale en-IN)
    • Flutter version 1.1.6-pre.37 at /Users/ajayakodi/flutter
    • Framework revision cb6fec10dc (27 hours ago), 2019-01-07 01:04:28 -0500
    • Engine revision 7112b72cc2
    • Dart version 2.1.1 (build 2.1.1-dev.0.1 ec86471ccc)

[✓] Android toolchain - develop for Android devices (Android SDK version 27.0.3)
    • Android SDK at /Users/ajayakodi/Library/Android/sdk
    • Android NDK at /Users/ajayakodi/Library/Android/sdk/ndk-bundle
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/ajayakodi/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/ajayakodi/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)
    • All Android licenses accepted.

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    • ios-deploy 1.9.4
    • CocoaPods version 1.5.3

[!] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] IntelliJ IDEA Community Edition (version 2018.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 29.0.4
    • Dart plugin version 182.4505.50

[✓] VS Code (version 1.30.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 2.21.1

[✓] Connected device (1 available)
    • iPhone X • F120CB9B-065C-4DAA-92E3-5CC0CAC999A1 • ios • iOS 11.3 (simulator)

! Doctor found issues in 2 categories.

The text was updated successfully, but these errors were encountered:

zoechi · 2019-01-08T06:47:22Z

Please add the output of flutter doctor -v.

We would prefer a minimal runnable reproduction
as a single file* so that we can just copy your code into lib/main.dart of a new project and run to reproduce.

hnvn · 2019-01-08T08:48:49Z

TextInputFormatter receives double of an editing event in iOS. I've tried to address this matter and published it as a package, hope that you find it userful

praveen-francium · 2019-01-08T09:33:23Z

Please add the output of flutter doctor -v.

We would prefer a minimal runnable reproduction
as a single file* so that we can just copy your code into lib/main.dart of a new project and run to reproduce.

added flutter doctor -v

praveen-francium · 2019-01-08T11:25:18Z

TextInputFormatter receives double of an editing event in iOS. I've tried to address this matter and published it as a package, hope that you find it userful

the issue is still coming in IOS when we enter the values in the field concurrently it is not working properly

praveen-francium · 2019-01-08T16:08:35Z

Please add the output of flutter doctor -v.

We would prefer a minimal runnable reproduction
as a single file* so that we can just copy your code into lib/main.dart of a new project and run to reproduce.

@zoechi i have updated the code added as a single file ,you can run that in main.dart.

jonahwilliams · 2019-01-08T18:00:42Z

I'm not able to reproduce on master with #24779 included. Can you confirm that this is still happening?

praveen-francium · 2019-01-10T12:59:20Z

I'm not able to reproduce on master with #24779 included. Can you confirm that this is still happening?

@jonahwilliams @zoechi
flutterIssue.mov.zip
I am still getting this issue . I have attached the Zip file

jakthegr8 · 2019-01-10T17:53:02Z

Thanks for the video and code sample @praveen-francium. I am also facing the same issue. I guess this is because of the TextFormField keyboard event is not waiting for formatEditUpdate to update the text. Due to that, it is creating a cyclic redundancy and numbers are added and updated back and forth. Everything will work fine if we type slowly, which means we allow the formatEditUpdate to update the text before the next keyboard event. If we increase the speed of typing all will fail :(

Also suspecting the length limit LengthLimitingTextInputFormatter(13), On more than allowed characters scenario, Will this restrict the keyboard (keypress) event or just slice the input text and replace? If replace means, We are adding more characters in formatEditUpdate as well right., which may clash with the LengthLimitingTextInputFormatter on replace. Not sure, how these event things are managed (Async or Sync) in flutter.

jonahwilliams · 2019-01-10T21:50:27Z

Please post your flutter doctor -v

praveen-francium · 2019-01-11T04:11:15Z

Please post your flutter doctor -v

I have posted the output of flutter doctor -v above

hnvn · 2019-01-11T13:50:54Z

try setting composing to TextRange(start: 0, end: 0) is iOS and TextRange.empty in Android. It works in my case.

praveen-francium · 2019-01-21T03:42:55Z

try setting composing to TextRange(start: 0, end: 0) is iOS and TextRange.empty in Android. It works in my case.

i am still getting the issue when i remove all the values in the field and started to re enter the values

red42 · 2019-06-24T19:41:27Z

I'm observing this issue when a digit and backspace are entered almost simultaneously. Tested on a physical device.

iapicca · 2020-07-27T11:53:43Z

Hi @praveen-francium

running the code above with the latest master and intl 0.16.1

doctor

[✓] Flutter (Channel master, 1.21.0-6.0.pre.37, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.37 at /Users/nevercode/development/flutter_master
    • Framework revision 35e7005184 (2 days ago), 2020-07-25 09:44:17 -0700
    • Engine revision 626244a72c
    • Dart version 2.9.0 (build 2.9.0-21.0.dev a3815b6590)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (3 available)
    • macOS (desktop)  • macos      • darwin-x64     • Mac OS X 10.15.5 19F101
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 84.0.4147.89

• No issues found!

the issue seems to be solved, I feel safe to close this issue,
if you disagree please write in the comments and I will reopen it.
Thank you

parammittal16 · 2020-08-06T03:54:42Z

try removing the number keyboard type. using the default keyboard is working fine

iapicca · 2020-08-06T07:58:18Z

@TahaTesser

TahaTesser · 2020-08-07T13:36:50Z

@parammittal16

No issues on latest master

Code Sample

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';

RegExp regexPrice = RegExp(
    r"[^\d]"); //removes all characters and special symbols except numbers
void main() {
  runApp(MaterialApp(
    home: App(),
  ));
}

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyApp();
  }
}

class MyApp extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Format"),
      ),
      body: Center(
          child: Form(
              child: Container(
        child: TextFormField(
          // keyboardType: TextInputType.number,
          decoration: InputDecoration(hintText: "Enter Number to Format"),
          inputFormatters: [
            CurrencyFormat(),
            LengthLimitingTextInputFormatter(13),
          ],
        ),
      ))),
    );
  }
}

class CurrencyFormat extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > 14) {
      return oldValue;
    }
    if (newValue.text.trim() == "S\$") {
      return newValue.copyWith(text: " ");
    } else {
      int num = int.parse(newValue.text.replaceAll(regexPrice, ''));

      final f = new NumberFormat.currency(
        decimalDigits: 0,
        symbol: "S\$" + " ",
      );
      final newString = f.format(num);
      return new TextEditingValue(
          selection: new TextSelection.fromPosition(
              new TextPosition(offset: newString.length)),
          text: newString);
    }
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.245, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.245 at /Users/taha/Code/flutter_master
    • Framework revision 77b4505c80 (11 hours ago), 2020-08-06 18:51:02 -0700
    • Engine revision cd3ea1e839
    • Dart version 2.10.0 (build 2.10.0-3.0.dev fcafd43f2c)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.13.2

[✓] Connected device (3 available)
    • macOS (desktop)  • macos      • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

github-actions · 2021-08-14T09:00:57Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

zoechi changed the title Adding number format in text field in input formatter is not working properly in the ioS (when user enters values in the field fastly icurser gets triggered continuosly ) and working properly in android TextFormField with number format issue on iOS only Jan 8, 2019

zoechi added a: text input Entering text in a text field or keyboard related problems platform-ios iOS applications specifically framework flutter/packages/flutter repository. See also f: labels. labels Jan 8, 2019

zoechi added this to the Goals milestone Jan 8, 2019

zoechi added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 8, 2019

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 8, 2019

jonahwilliams self-assigned this Jan 8, 2019

jonahwilliams added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 8, 2019

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 10, 2019

jonahwilliams removed their assignment Dec 18, 2019

kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020

iapicca closed this as completed Jul 27, 2020

github-actions bot locked as resolved and limited conversation to collaborators Aug 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TextFormField with number format issue on iOS only #26216

TextFormField with number format issue on iOS only #26216

praveen-francium commented Jan 8, 2019 •

edited

zoechi commented Jan 8, 2019

hnvn commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

jonahwilliams commented Jan 8, 2019

praveen-francium commented Jan 10, 2019 •

edited

jakthegr8 commented Jan 10, 2019 •

edited

jonahwilliams commented Jan 10, 2019 •

edited

praveen-francium commented Jan 11, 2019

hnvn commented Jan 11, 2019

praveen-francium commented Jan 21, 2019

red42 commented Jun 24, 2019

iapicca commented Jul 27, 2020

parammittal16 commented Aug 6, 2020

iapicca commented Aug 6, 2020

TahaTesser commented Aug 7, 2020

github-actions bot commented Aug 14, 2021

TextFormField with number format issue on iOS only #26216

TextFormField with number format issue on iOS only #26216

Comments

praveen-francium commented Jan 8, 2019 • edited

zoechi commented Jan 8, 2019

hnvn commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

praveen-francium commented Jan 8, 2019

jonahwilliams commented Jan 8, 2019

praveen-francium commented Jan 10, 2019 • edited

jakthegr8 commented Jan 10, 2019 • edited

jonahwilliams commented Jan 10, 2019 • edited

praveen-francium commented Jan 11, 2019

hnvn commented Jan 11, 2019

praveen-francium commented Jan 21, 2019

red42 commented Jun 24, 2019

iapicca commented Jul 27, 2020

parammittal16 commented Aug 6, 2020

iapicca commented Aug 6, 2020

TahaTesser commented Aug 7, 2020

github-actions bot commented Aug 14, 2021

praveen-francium commented Jan 8, 2019 •

edited

praveen-francium commented Jan 10, 2019 •

edited

jakthegr8 commented Jan 10, 2019 •

edited

jonahwilliams commented Jan 10, 2019 •

edited