intl_phone_number_input icon indicating copy to clipboard operation
intl_phone_number_input copied to clipboard

Validation always fails in Web version

Open sigma-libra opened this issue 3 years ago • 1 comments

Describe the bug When inputting a valid phone number for any country in the Web version, the validation fails. When running the same code on a phone or in an emulator, these same numbers are accepted as valid.

Package version intl_phone_number_input: ^0.7.0+2

Flutter version Flutter 2.10.4

To Reproduce Steps to reproduce the behavior:

  1. Code Snippet
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({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);

    return MaterialApp(
      title: 'Demo',
      themeMode: ThemeMode.dark,
      darkTheme: darkTheme,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Demo')),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  final TextEditingController controller = TextEditingController();
  String initialCountry = 'NG';
  PhoneNumber number = PhoneNumber(isoCode: 'NG');

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          InternationalPhoneNumberInput(
            onInputChanged: (PhoneNumber number) {
              print(number.phoneNumber);
            },
            onInputValidated: (bool value) {
              print(value);
            },
            selectorConfig: const SelectorConfig(
              selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
            ),
            ignoreBlank: false,
            autoValidateMode: AutovalidateMode.disabled,
            selectorTextStyle: const TextStyle(color: Colors.black),
            initialValue: number,
            textFieldController: controller,
            formatInput: false,
            keyboardType:
            const TextInputType.numberWithOptions(signed: true, decimal: true),
            inputBorder: const OutlineInputBorder(),
            onSaved: (PhoneNumber number) {
              print('On Saved: $number');
            },
          ),
          ElevatedButton(
            onPressed: () {
              formKey.currentState?.validate();
            },
            child: const Text('Validate'),
          ),
          ElevatedButton(
            onPressed: () {
              getPhoneNumber('+15417543010');
            },
            child: const Text('Update'),
          ),
          ElevatedButton(
            onPressed: () {
              formKey.currentState?.save();
            },
            child: const Text('Save'),
          ),
        ],
      ),
    );
  }

  void getPhoneNumber(String phoneNumber) async {
    PhoneNumber number =
    await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number;
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
  1. Access Web UI
  2. Input any valid phone number (eg US +1 800 555 1234)
  3. Press validate

Expected behavior Number should be valid.

Screenshots

Screenshot from 2022-04-26 22-09-41

Screenshot from 2022-04-26 22-10-31

** Targeted platforms (please complete the following information):**

  • Web [✔ or ❌]

Additional context Add any other context about the problem here.

sigma-libra avatar Apr 26 '22 20:04 sigma-libra

Check here ISSUE 297 for possible duplicated

luis901101 avatar Apr 27 '22 01:04 luis901101