intl_phone_number_input icon indicating copy to clipboard operation
intl_phone_number_input copied to clipboard

Cursor Alignment in Initial Value

Open bahricanyesil opened this issue 4 years ago • 3 comments

Describe the bug The package is not aligning the cursor to the end when initialValue first appears.

Package version 0.7.0+2

Flutter version 2.5.0

To Reproduce Steps to reproduce the behavior: 1- Create and pass an initialValue (PhoneNumber) to the widget after an async work. 2- The cursor is at the beginning instead of the end.

Expected behavior I guess it is better to align the cursor always to the end unless the user taps a specific index.

bahricanyesil avatar Sep 20 '21 15:09 bahricanyesil

Hello Everyone Is there any updates on this issue? I am facing it too

noororfahly13 avatar Nov 02 '21 07:11 noororfahly13

Hello Everyone Is there any updates on this issue? I am facing it too

Can you try this code sample as a temporary solution @noororfahly13 ?

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

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

  @override
  _PhoneInputScreenState createState() => _PhoneInputScreenState();
}

class _PhoneInputScreenState extends State<PhoneInputScreen> {
  PhoneNumber _initialPhone = PhoneNumber(dialCode: '90', isoCode: 'TR');

  bool isAlignedFirst = false;

  final TextEditingController _phoneController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _phoneController.addListener(() {
      if (_phoneController.text.isNotEmpty && !isAlignedFirst) {
        _phoneController.selection = TextSelection.fromPosition(
            TextPosition(offset: _phoneController.text.length));
        isAlignedFirst = true;
      }
    });
  }

  Future<void> _setPhone() async {
    try {
      final PhoneNumber phoneNum =
          await PhoneNumber.getRegionInfoFromPhoneNumber('+905538265342');
      setState(() {
        _initialPhone = phoneNum;
        isAlignedFirst = false;
      });
    } on Exception catch (err) {
      // print(err);
    }
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InternationalPhoneNumberInput(
                  onInputChanged: (PhoneNumber val) {},
                  textFieldController: _phoneController,
                  initialValue: _initialPhone,
                  autoFocusSearch: true,
                ),
                TextButton(
                  onPressed: () async => _setPhone(),
                  child: const Text('SET PHONE NUMBER'),
                ),
              ],
            ),
          ),
        ),
      );
}

bahricanyesil avatar Nov 03 '21 09:11 bahricanyesil

In onInputChanged method, add the following line

numCont.selection = TextSelection.collapsed(offset: numCont.text.length);

and numCont is your own TextEditingController.

Here is the full code:

onInputChanged: (PhoneNumber number) {
        numCont.selection = TextSelection.collapsed(offset: numCont.text.length);
        },

Shehzad1Dev avatar May 03 '23 06:05 Shehzad1Dev