ReactivePhoneFormField - Weird Behavior on init

[valas69]

Textfield is empty, the flag selected is invisible unless you click on the the textfield, then keyboard appears and disapear, you have to click again to enter phone number.

Web IDE with source code : https://flutlab.io/editor/e29d5958-e80c-4c95-8d01-eb1f756e8964

Minimum reproductible code :

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_phone_form_field/reactive_phone_form_field.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: ReactivePhoneFormField<PhoneNumber>(
            formControl: FormControl(),
            countrySelectorNavigator: const CountrySelectorNavigator.dialog(),
          ),
        ),
      ),
    );
  }
}

Using :

  reactive_forms: ^16.0.4
  reactive_phone_form_field: ^2.0.0

Screen_recording_20230817_223837.mp4

Expected behavior :

The flag selected should be already visible without first clicking on the textfield, and when clicking we should directly input the phone number

Flutter doctor :

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.22623.1325], locale en-GB)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[!] Visual Studio - develop Windows apps (Visual Studio Build Tools 2017 15.9.49)
    X Visual Studio 2019 or later is required.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2022.2)
[√] Android Studio (version 2022.3)
[√] IntelliJ IDEA Ultimate Edition (version 2022.3)
[√] IntelliJ IDEA Ultimate Edition (version 2023.1)
[√] VS Code (version 1.75.1)
[√] Connected device (4 available)
[√] Network resources                

! Doctor found issues in 1 category.

[valas69]

I had to put isCountryChipPersistent: true to fix that

[github-actions]

Hi @valas69!
Your issue has been closed. If we were helpful don't forget to star the repo.

Please check our reactive_forms_generator package

We would appreciate sponsorship subscription or one time donation
https://github.com/sponsors/artflutter