intl_phone_number_input icon indicating copy to clipboard operation
intl_phone_number_input copied to clipboard

Triggers Form.onChanged event on first load, with a non-null initialValue

Open sundar-karpura opened this issue 6 months ago • 0 comments

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 [✔]

sundar-karpura avatar Aug 25 '24 21:08 sundar-karpura