bugfix: close keyboard on scroll (#162)

* Supported safe area in bottom sheet of country selector (#153) Co-authored-by: Serge Shkurko <shkurko@thekey.space> * update intl to 18.0 (#156) * 7.0.6 * Fix search cursor color and initial bottom sheet height (#157) * downgrade intl * fix cursor color * fix panel height * enlarge prefix hit area * added cursor fix * revert changes from incorrect pr * feature: allow searching by ISO code * feature: search by submitting form * bugfix: fixed issue where it would double pop the route if submitting form and both lists had results * feature: search by submitting form (#160) * feature: search by submitting form * bugfix: fixed issue where it would double pop the route if submitting form and both lists had results * feature: allow searching by ISO code (#161) * bugfix: hide the keyboard when scrolling list, so it doesn't overlap * feature: use autofill hints for search input * feature: auto-submit when autofilling/pasting country * refactor: move change handler into seperate method * refactor: fixed deprecated window usage * fix: copy/paste wasn't possible due to context menu builder being passed as null * fix: remove listener on dispose --------- Co-authored-by: Serge Shkurko <sergeshkurko@outlook.com> Co-authored-by: Serge Shkurko <shkurko@thekey.space> Co-authored-by: zitob9 <elias.housni@gmail.com> Co-authored-by: cedvdb <cedvandenbosch@gmail.com> Co-authored-by: cizmarf <37090294+cizmarf@users.noreply.github.com> Co-authored-by: Mattias Siø Fjellvang <mattias@doubble.dk>
cedvdb · Feb 2, 2024 · 7ca1521 · 7ca1521
1 parent ff66aa2
commit 7ca1521
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 15 deletions.
diff --git a/lib/src/widgets/country_selector/country_selector_navigator.dart b/lib/src/widgets/country_selector/country_selector_navigator.dart
@@ -357,6 +357,7 @@ class DraggableModalBottomSheetNavigator extends CountrySelectorNavigator {
           topLeft: Radius.circular(16),
           topRight: Radius.circular(16),
         );
+
     return showModalBottomSheet<Country>(
       context: context,
       shape: RoundedRectangleBorder(
@@ -368,13 +369,9 @@ class DraggableModalBottomSheetNavigator extends CountrySelectorNavigator {
         maxChildSize: maxChildSize,
         expand: false,
         builder: (context, scrollController) {
-          return Container(
-            decoration: ShapeDecoration(
-              color: Theme.of(context).canvasColor,
-              shape: RoundedRectangleBorder(
-                borderRadius: effectiveBorderRadius,
-              ),
-            ),
+          return _CountrySelectorWidget(
+            scrollController: scrollController,
+            borderRadius: effectiveBorderRadius,
             child: _getCountrySelector(
               onCountrySelected: (country) => Navigator.pop(context, country),
               scrollController: scrollController,
@@ -388,3 +385,49 @@ class DraggableModalBottomSheetNavigator extends CountrySelectorNavigator {
     );
   }
 }
+
+class _CountrySelectorWidget extends StatefulWidget {
+  final ScrollController scrollController;
+  final BorderRadiusGeometry borderRadius;
+  final Widget child;
+
+  const _CountrySelectorWidget({
+    required this.scrollController,
+    required this.child,
+    required this.borderRadius,
+  });
+
+  @override
+  State<_CountrySelectorWidget> createState() => _CountrySelectorWidgetState();
+}
+
+class _CountrySelectorWidgetState extends State<_CountrySelectorWidget> {
+  @override
+  initState() {
+    super.initState();
+    widget.scrollController.addListener(_onScrollListener);
+  }
+
+  @override
+  dispose() {
+    widget.scrollController.removeListener(_onScrollListener);
+    super.dispose();
+  }
+
+  _onScrollListener() {
+    FocusManager.instance.primaryFocus?.unfocus();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: ShapeDecoration(
+        color: Theme.of(context).canvasColor,
+        shape: RoundedRectangleBorder(
+          borderRadius: widget.borderRadius,
+        ),
+      ),
+      child: widget.child,
+    );
+  }
+}
diff --git a/lib/src/widgets/country_selector/search_box.dart b/lib/src/widgets/country_selector/search_box.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-class SearchBox extends StatelessWidget {
+class SearchBox extends StatefulWidget {
   final Function(String) onChanged;
   final Function() onSubmitted;
   final bool autofocus;
@@ -18,21 +18,49 @@ class SearchBox extends StatelessWidget {
     this.searchIconColor,
   });
 
+  @override
+  State<SearchBox> createState() => _SearchBoxState();
+}
+
+class _SearchBoxState extends State<SearchBox> {
+  String _previousValue = '';
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void handleChange(e) {
+    widget.onChanged(e);
+
+    // detect length difference
+    final diff = e.length - _previousValue.length;
+    if (diff > 3) {
+      // more than 3 characters added, probably a paste / autofill of country name
+      widget.onSubmitted();
+    }
+
+    setState(() {
+      _previousValue = e;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
       child: TextField(
-        autofocus: autofocus,
-        onChanged: onChanged,
-        onSubmitted: (_) => onSubmitted(),
-        cursorColor: style?.color,
-        style: style,
-        decoration: decoration ??
+        autofocus: widget.autofocus,
+        onChanged: handleChange,
+        onSubmitted: (_) => widget.onSubmitted(),
+        cursorColor: widget.style?.color,
+        style: widget.style,
+        autofillHints: const [AutofillHints.countryName],
+        decoration: widget.decoration ??
             InputDecoration(
               prefixIcon: Icon(
                 Icons.search,
-                color: searchIconColor ??
+                color: widget.searchIconColor ??
                     (Theme.of(context).brightness == Brightness.dark
                         ? Colors.white54
                         : Colors.black38),