intl_phone_number_input icon indicating copy to clipboard operation
intl_phone_number_input copied to clipboard

Can't change the input value after fill the complete number

Open DevTiago opened this issue 2 years ago • 3 comments

Describe the bug Can't change de input value after phone number completed

Package version 0.7.0+2

Flutter version Flutter 3.0.4 • channel stable

To Reproduce Steps to reproduce the behavior:

  1. Code Snippet
class VerifyUser extends StatefulWidget {
  const VerifyUser({
    Key? key,
  }) : super(key: key);

  @override
  State<VerifyUser> createState() => _VerifyUser();
}

class _VerifyUser extends State<VerifyUser> {

  PhoneNumber number = PhoneNumber(isoCode: 'PT');
  final TextEditingController phoneInputController = TextEditingController();

  @override
  void dispose() {
    phoneInputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus) {
          currentFocus.unfocus();
        }
      },
      child: Scaffold(
        extendBody: true,
        appBar: AppBar(
          leading: const CustomBackButton(),
          backgroundColor: appTheme.primaryColor,
          elevation: 0.0,
        ),
        body: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 40,
              ),
              Text('Your phone number', style: appTheme.textTheme.headline1),
              const SizedBox(
                height: 20,
              ),
              const Spacer(),
              const Spacer(),
              const Text('NUMBER'),
              const SizedBox(
                height: 10,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  InternationalPhoneNumberInput(
                    textFieldController: phoneInputController,
                    initialValue: number,
                    ignoreBlank: true,
                    autoValidateMode: AutovalidateMode.disabled,
                    autoFocus: true,
                    selectorConfig: const SelectorConfig(
                      trailingSpace: false,
                      selectorType: PhoneInputSelectorType.DIALOG,
                      useEmoji: true,
                      showFlags: true,
                    ),
                    onInputChanged: (PhoneNumber value) {
                      setState(() {
                        number = value;
                      });
                    },
                    hintText: 'XXX XXX XXX...',
                  ),
                ],
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}
  1. Use case
  • I'm starting with a Portuguese phone number and after i fill the input i can't change or delete the input. The text cursor goes to the beginning of input and i can't change it.

I have to go back and move to the screen again so the input was cleared and i have the chance to fill the input with the correct number.

  1. Interaction with the widget No further interaction

  2. See error Get no error message, only the impossibility to change or delete the input

Expected behavior It should be available to change or delete the input

Screenshots image

At this point the cursor text is on the beginning of the input (the screen don't show it) and i cant change or delete the number.

** Targeted platforms (please complete the following information):** Android and iOS

Additional context No further info

DevTiago avatar Aug 22 '22 12:08 DevTiago

same problem with isoCode 'EG', 'ARG' but not with all isocodes

HazemElmahy avatar Aug 23 '22 10:08 HazemElmahy

I come across with same issue, and I predict the issue is due to some logic behind trigger the redraw of the widget, while initialValue and onChange also point to same variable "number", then the text cursor will jump to an incorrect place.

My work around is using a separated variable for "initialValue: numberForInitialOnly" and onChange event remain unchanged. The problem seem to be not happen again

cyrilhl avatar Sep 02 '22 02:09 cyrilhl

Same problem, when I initialised initialValue with both isoCode and phoneNumber, could not clear or re-type the number, The text cursor goes to the beginning of input.

InternationalPhoneNumberInput(
                                  ...,
                                  initialValue: PhoneNumber(isoCode: 'NZ', phoneNumber: '0213456789') ,
                                  ...,
                                )

FrankLi-nz avatar Jan 25 '23 00:01 FrankLi-nz