natintosh / intl_phone_number_input

MIT License
164 stars 496 forks source link

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

Open DevTiago opened 2 years ago

DevTiago commented 2 years ago

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

HazemElmahy commented 2 years ago

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

cyrilhl commented 2 years ago

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

FrankLi-nz commented 1 year ago

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') ,
                                  ...,
                                )