Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sundar-karpura opened this issue Aug 25, 2024 · 0 comments

Comments

@sundar-karpura
Copy link

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 [✔]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant