fix focus issue (#76) (#77)

* fix focus issue * fixes auto focus
cedvdb · Oct 23, 2021 · ba4ff88 · ba4ff88
1 parent 2c4b25f
commit ba4ff88
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [4.3.1] 23 / 10 / 2021
+- fix a focus issue when opening country selection
+- search bar in country selection is no auto focus false except for the web
+
+
 ## [4.3.0] 18 / 10 / 2021
 - Added most of textfield params to the phone input.
 - Added method to select the current national number from the controller

diff --git a/lib/src/widgets/country_picker/country_selector.dart b/lib/src/widgets/country_picker/country_selector.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:phone_form_field/l10n/generated/phone_field_localization.dart';
 import 'package:phone_form_field/src/helpers/country_translator.dart';
@@ -43,6 +44,9 @@ class CountrySelector extends StatefulWidget {
   /// The message displayed instead of the list when the search has no results
   final String? noResultMessage;
 
+  /// whether the search input is auto focussed
+  final bool searchAutofocus;
+
   CountrySelector({
     Key? key,
     required this.onCountrySelected,
@@ -53,6 +57,7 @@ class CountrySelector extends StatefulWidget {
     this.noResultMessage,
     List<String>? favoriteCountries,
     List<Country>? countries,
+    this.searchAutofocus = kIsWeb,
   })  : countries = countries ?? allCountries,
         favoriteCountries = favoriteCountries ?? _emptyFavCountriesArray,
         super(key: key);
@@ -128,6 +133,7 @@ class _CountrySelectorState extends State<CountrySelector> {
           height: 70,
           width: double.infinity,
           child: SearchBox(
+            autofocus: widget.searchAutofocus,
             onChanged: _onSearch,
           ),
         ),

diff --git a/lib/src/widgets/country_picker/country_selector_navigator.dart b/lib/src/widgets/country_picker/country_selector_navigator.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import '../../models/all_countries.dart';
@@ -12,6 +13,7 @@ abstract class CountrySelectorNavigator {
   final bool showCountryCode;
   final bool sortCountries;
   final String? noResultMessage;
+  final bool searchAutofocus;
 
   const CountrySelectorNavigator({
     this.countries,
@@ -20,6 +22,7 @@ abstract class CountrySelectorNavigator {
     this.showCountryCode = true,
     this.sortCountries = false,
     this.noResultMessage,
+    required this.searchAutofocus,
   });
 
   Future<Country?> navigate(BuildContext context);
@@ -37,24 +40,27 @@ abstract class CountrySelectorNavigator {
         sortCountries: sortCountries,
         noResultMessage: noResultMessage,
         scrollController: scrollController,
+        searchAutofocus: searchAutofocus,
       );
 }
 
 class DialogNavigator extends CountrySelectorNavigator {
-  const DialogNavigator({
-    List<Country>? countries,
-    List<String>? favorites,
-    bool addSeparator = true,
-    bool showCountryCode = true,
-    bool sortCountries = false,
-    String? noResultMessage,
-  }) : super(
+  const DialogNavigator(
+      {List<Country>? countries,
+      List<String>? favorites,
+      bool addSeparator = true,
+      bool showCountryCode = true,
+      bool sortCountries = false,
+      String? noResultMessage,
+      bool searchAutofocus = kIsWeb})
+      : super(
           countries: countries,
           favorites: favorites,
           addSeparator: addSeparator,
           showCountryCode: showCountryCode,
           sortCountries: sortCountries,
           noResultMessage: noResultMessage,
+          searchAutofocus: searchAutofocus,
         );
 
   @override
@@ -71,21 +77,22 @@ class DialogNavigator extends CountrySelectorNavigator {
 }
 
 class BottomSheetNavigator extends CountrySelectorNavigator {
-  const BottomSheetNavigator({
-    List<Country>? countries,
-    List<String>? favorites,
-    bool addSeparator = true,
-    bool showCountryCode = true,
-    bool sortCountries = false,
-    String? noResultMessage,
-  }) : super(
-          countries: countries,
-          favorites: favorites,
-          addSeparator: addSeparator,
-          showCountryCode: showCountryCode,
-          sortCountries: sortCountries,
-          noResultMessage: noResultMessage,
-        );
+  const BottomSheetNavigator(
+      {List<Country>? countries,
+      List<String>? favorites,
+      bool addSeparator = true,
+      bool showCountryCode = true,
+      bool sortCountries = false,
+      String? noResultMessage,
+      bool searchAutofocus = kIsWeb})
+      : super(
+            countries: countries,
+            favorites: favorites,
+            addSeparator: addSeparator,
+            showCountryCode: showCountryCode,
+            sortCountries: sortCountries,
+            noResultMessage: noResultMessage,
+            searchAutofocus: searchAutofocus);
 
   @override
   Future<Country?> navigate(BuildContext context) {
@@ -114,14 +121,15 @@ class ModalBottomSheetNavigator extends CountrySelectorNavigator {
     bool showCountryCode = true,
     bool sortCountries = false,
     String? noResultMessage,
+    bool searchAutofocus = kIsWeb,
   }) : super(
-          countries: countries,
-          favorites: favorites,
-          addSeparator: addSeparator,
-          showCountryCode: showCountryCode,
-          sortCountries: sortCountries,
-          noResultMessage: noResultMessage,
-        );
+            countries: countries,
+            favorites: favorites,
+            addSeparator: addSeparator,
+            showCountryCode: showCountryCode,
+            sortCountries: sortCountries,
+            noResultMessage: noResultMessage,
+            searchAutofocus: searchAutofocus);
 
   @override
   Future<Country?> navigate(BuildContext context) {
@@ -144,25 +152,26 @@ class DraggableModalBottomSheetNavigator extends CountrySelectorNavigator {
   final double maxChildSize;
   final BorderRadiusGeometry? borderRadius;
 
-  const DraggableModalBottomSheetNavigator({
-    this.initialChildSize = 0.5,
-    this.minChildSize = 0.25,
-    this.maxChildSize = 0.85,
-    this.borderRadius,
-    List<Country>? countries,
-    List<String>? favorites,
-    bool addSeparator = true,
-    bool showCountryCode = true,
-    bool sortCountries = false,
-    String? noResultMessage,
-  }) : super(
-          countries: countries,
-          favorites: favorites,
-          addSeparator: addSeparator,
-          showCountryCode: showCountryCode,
-          sortCountries: sortCountries,
-          noResultMessage: noResultMessage,
-        );
+  const DraggableModalBottomSheetNavigator(
+      {this.initialChildSize = 0.5,
+      this.minChildSize = 0.25,
+      this.maxChildSize = 0.85,
+      this.borderRadius,
+      List<Country>? countries,
+      List<String>? favorites,
+      bool addSeparator = true,
+      bool showCountryCode = true,
+      bool sortCountries = false,
+      String? noResultMessage,
+      bool searchAutofocus = kIsWeb})
+      : super(
+            countries: countries,
+            favorites: favorites,
+            addSeparator: addSeparator,
+            showCountryCode: showCountryCode,
+            sortCountries: sortCountries,
+            noResultMessage: noResultMessage,
+            searchAutofocus: searchAutofocus);
 
   @override
   Future<Country?> navigate(BuildContext context) {

diff --git a/lib/src/widgets/country_picker/search_box.dart b/lib/src/widgets/country_picker/search_box.dart
@@ -1,17 +1,22 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 class SearchBox extends StatelessWidget {
   final Function(String) onChanged;
+  final bool autofocus;
 
-  SearchBox({required this.onChanged});
+  SearchBox({
+    required this.onChanged,
+    required this.autofocus,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
       child: TextField(
-        autofocus: true,
+        autofocus: autofocus,
         onChanged: onChanged,
         decoration: InputDecoration(
           prefixIcon: Icon(

diff --git a/lib/src/widgets/phone_field.dart b/lib/src/widgets/phone_field.dart
@@ -116,10 +116,12 @@ class PhoneField extends StatefulWidget {
 }
 
 class _PhoneFieldState extends State<PhoneField> {
+  /// size of input so we can render inkwell at correct height
   Size? _size;
 
   bool get _isOutlineBorder => widget.decoration.border is OutlineInputBorder;
   PhoneFieldController get controller => widget.controller;
+
   _PhoneFieldState();
 
   @override
@@ -139,11 +141,13 @@ class _PhoneFieldState extends State<PhoneField> {
   }
 
   void selectCountry() async {
+    SystemChannels.textInput.invokeMethod('TextInput.hide');
     final selected = await widget.selectorNavigator.navigate(context);
     if (selected != null) {
       controller.isoCode = selected.isoCode;
     }
     controller.focusNode.requestFocus();
+    SystemChannels.textInput.invokeMethod('TextInput.show');
   }
 
   Widget build(BuildContext context) {
@@ -226,7 +230,7 @@ class _PhoneFieldState extends State<PhoneField> {
         ),
         child: Padding(
           // outline border has padding on the left
-          // but only when prefixIcon is used (!isCountryCodeFixed)
+          // but only when prefixIcon is used
           // so we need to make it a 12 bigger
           padding: _isOutlineBorder
               ? const EdgeInsets.only(left: 12)
@@ -246,7 +250,9 @@ class _PhoneFieldState extends State<PhoneField> {
         maintainState: true,
         visible: visible,
         child: CountryCodeChip(
-          key: visible ? Key('country-code-chip') : null,
+          key: visible
+              ? Key('country-code-chip')
+              : Key('country-code-chip-hidden'),
           country: Country(controller.isoCode ?? controller.defaultIsoCode),
           showFlag: widget.showFlagInInput,
           textStyle: TextStyle(