Update Mask moves cursor

[victoraugustolls]

I have a listener into a MaskedTextController where I update the mask based on the number of characters.

Something like this:

if (_phoneNumberController.text.length == 15) {
  _phoneNumberController.updateMask('(00) 00000-0000');
} else {
  _phoneNumberController.updateMask('(00) 0000-00000');
}

The problem is, when updating the mask, the text field cursor goes to the text field start. Is this the expected behaviour? If so, are there any workarounds?

Thanks in advance!

[bhrott]

Hi @victoraugustolls,

Yes, this is the expected behaviour but I will add an option to disable this. Thanks for reporting.

[victoraugustolls]

@benhurott thanks a lot!

[GianfrancoMS]

Any updates on this issue?

[bhrott]

Hi guys!

Sorry for the time, I was in another galaxy.

I tried with this code and it's working fine.

Widget _brPhoneInput() {
    var controller = new MaskedTextController(mask: '(00) 0000-0000');

    controller.beforeChange = (String previous, String next) {
      if (next.length > 14) {
        controller.updateMask('(00) 00000-0000');
      }
      else {
        controller.updateMask('(00) 0000-0000');
      }

      return true;
    };

    controller.afterChange = (String previous, String next) {
      print("$previous | $next");
    };

    return new TextField(
      controller: controller,
      keyboardType: TextInputType.phone,
        decoration: InputDecoration(
            labelText: 'Phone'
        )
    );
  }

This is the result: https://screencast-o-matic.com/watch/cqVicw3n9y

Can you add more info about the device, SO, flutter version, etc?

[mwalkerwells]

Happens to me too & this is my workaround (below), although, it seems like it's a broader problem (https://github.com/flutter/flutter/issues/11416).

// State<Input>
  onValueChange() {
    if (inputController.selection.start < 0) {
      inputController.selection = new TextSelection.fromPosition(
        new TextPosition(offset: inputController.text.length)
      );
    }
  }

  @override
  void initState() {
    super.initState();
    inputController = MaskedTextController(mask: '(000) 000-0000')..addListener(onValueChange);
  }

[lawonga]

Not working for me, seems like there is system code changing the old selection.extentOffset behind our backs!

[lsaudon]

I have same error. When the point is added the cursor back to the beginning and returns to the end.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _phoneController = MaskedTextController(mask: '00.00.00.00.00');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextFormField(
          controller: _phoneController,
          keyboardType: TextInputType.phone,
          autovalidate: true,
          textInputAction: TextInputAction.done,
        ),
      ),
    );
  }
}

flutter doctor

[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] Connected device (2 available)

Device is emulator Pixel 2 or Nexus 5

[louia]

Any updates on this issue?