intl_phone_number_input
intl_phone_number_input copied to clipboard
Can't change the input value after fill the complete number
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:
- 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(),
],
),
),
),
);
}
}
- 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.
-
Interaction with the widget No further interaction
-
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
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
same problem with isoCode 'EG', 'ARG' but not with all isocodes
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
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') ,
...,
)