bhrott / flutter-masked-text

A masked text for Flutter.
https://pub.dartlang.org/packages/flutter_masked_text
MIT License
276 stars 124 forks source link

Update Mask moves cursor #12

Open victoraugustolls opened 6 years ago

victoraugustolls commented 6 years ago

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 commented 6 years ago

Hi @victoraugustolls,

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

victoraugustolls commented 6 years ago

@benhurott thanks a lot!

GianfrancoMS commented 5 years ago

Any updates on this issue?

bhrott commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

lsaudon commented 5 years ago

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 commented 4 years ago

Any updates on this issue?