intl_phone_number_input
intl_phone_number_input copied to clipboard
Triggers Form.onChanged event on first load, with a non-null initialValue
Bug description: When used in a Form, InternationalPhoneNumberInput triggers Form.onChanged event on first load itself, with a non-null initialValue. This results in marking the form as dirty and prevents us from providing a meaningful warning to user about saving a modified form before existing the screen.
Package version intl_phone_number_input: ^0.7.4
Flutter version Flutter 3.22.2 • channel stable Tools • Dart 3.4.3 • DevTools 2.34.3
To Reproduce Add the following to index.html
<script src="assets/packages/libphonenumber_plugin/js/libphonenumber.js"></script>
<script src="assets/packages/libphonenumber_plugin/js/stringbuffer.js"></script>
Execute the following code for Web.
import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
// ignore: library_private_types_in_public_api
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
PhoneNumber number = PhoneNumber(isoCode: "US", dialCode: "1", phoneNumber: "5184552800");
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 600,
child: Form(
key: formKey,
onChanged: () {
debugPrint("Form has changed");
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InternationalPhoneNumberInput(
onInputChanged: (PhoneNumber number) {
debugPrint("onInputChanged: ${number.phoneNumber}");
},
onInputValidated: (bool value) {
debugPrint("onInputValidated: $value");
},
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
useBottomSheetSafeArea: true,
),
initialValue: number,
formatInput: true,
inputBorder: const OutlineInputBorder(),
onSaved: (PhoneNumber number) {
debugPrint('On Saved: $number');
},
),
],
),
),
),
),
);
}
}
Expected behavior Form.onChanged should be triggered only when the user explicitly change the phone number (either country code or the phone number itself)
** Targeted platforms (please complete the following information):**
- Web [✔]