fix on press backspace cursor not moving to previous field

canopas · Dec 17, 2024 · 5984cc5 · 5984cc5
1 parent 5c3b8e7
commit 5984cc5
Showing 1 changed file with 41 additions and 15 deletions.
diff --git a/app/lib/ui/flow/space/join/join_space_screen.dart b/app/lib/ui/flow/space/join/join_space_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:style/button/bottom_sticky_overlay.dart';
@@ -33,8 +34,40 @@ class _JoinSpaceState extends ConsumerState<JoinSpace> {
   @override
   void initState() {
     super.initState();
-    _controllers = List.generate(6, (index) => TextEditingController());
+    _controllers = List.generate(6, (index) => TextEditingController(text: '\u200b'));
     _focusNodes = List.generate(6, (index) => FocusNode());
+
+    for (int i = 0; i < _controllers.length; i++) {
+      _controllers[i].addListener(() {
+        _handleTextChange(i);
+      });
+    }
+  }
+
+  void _handleTextChange(int index) {
+    final text = _controllers[index].text;
+
+    if (text.isEmpty) {
+      // If the field becomes empty, add a zero-width space
+      _controllers[index].text = '\u200b';
+      _controllers[index].selection = const TextSelection.collapsed(offset: 1);
+
+      // Move focus to the previous field
+      if (index > 0) {
+        _focusNodes[index - 1].requestFocus();
+      }
+    } else if (text.length > 1) {
+      // If a valid character is entered, take the last character, convert it to uppercase
+      String newText = text.replaceAll('\u200b', '').toUpperCase();
+      _controllers[index].text = newText;
+      _controllers[index].selection = TextSelection.collapsed(offset: newText.length);
+
+      // Move focus to the next field
+      if (index < 5) {
+        _focusNodes[index + 1].requestFocus();
+      }
+      _updateJoinSpaceButtonState();
+    }
   }
 
   @override
@@ -150,7 +183,7 @@ class _JoinSpaceState extends ConsumerState<JoinSpace> {
           controller: _controllers[index],
           focusNode: _focusNodes[index],
           textAlign: TextAlign.center,
-          maxLength: 1,
+          maxLength: 2,
           decoration: const InputDecoration(
             border: InputBorder.none,
             counterText: '',
@@ -162,6 +195,7 @@ class _JoinSpaceState extends ConsumerState<JoinSpace> {
           onTapOutside: (event) {
             FocusManager.instance.primaryFocus?.unfocus();
           },
+
           onChanged: (text) {
             final upperCaseText = text.toUpperCase();
             if (_controllers[index].text != upperCaseText) {
@@ -170,17 +204,6 @@ class _JoinSpaceState extends ConsumerState<JoinSpace> {
                 selection: TextSelection.collapsed(offset: upperCaseText.length),
               );
             }
-
-            if (text.isEmpty) {
-              if (index > 0) _focusNodes[index - 1].requestFocus();
-            } else {
-              if (index < 5) {
-                _focusNodes[index + 1].requestFocus();
-              } else {
-                FocusManager.instance.primaryFocus?.unfocus();
-              }
-            }
-            _updateJoinSpaceButtonState();
           },
         ),
       ),
@@ -238,11 +261,14 @@ class _JoinSpaceState extends ConsumerState<JoinSpace> {
 
   void _updateJoinSpaceButtonState() {
     setState(() {
-      enabled =
-          _controllers.every((controller) => controller.text.trim().isNotEmpty);
+      enabled = _controllers.every((controller) {
+        final text = controller.text;
+        return text.length == 1 && text != '\u200b';
+      });
     });
   }
 
+
   void _observeError() {
     ref.listen(joinSpaceViewStateProvider.select((state) => state.error),
         (previous, next) {