fix #1821 use autofocus by browser instead of using our own focus (#2084

) Co-authored-by: Remon <[email protected]>
flutter-stripe · Feb 27, 2025 · e05117c · e05117c
1 parent b6c40ec
commit e05117c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 36 deletions.
diff --git a/example/web/index.html b/example/web/index.html
@@ -29,19 +29,16 @@
 
   <title>example</title>
   <link rel="manifest" href="manifest.json">
+
+
+
 </head>
 
 <body>
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('flutter-first-frame', function () {
-        navigator.serviceWorker.register('flutter_service_worker.js');
-      });
-    }
-  </script>
+  <script src="flutter_bootstrap.js" async></script>
   <script src="main.dart.js" type="application/javascript"></script>
 </body>
 

diff --git a/packages/stripe_web/lib/src/widgets/payment_element.dart b/packages/stripe_web/lib/src/widgets/payment_element.dart
@@ -9,16 +9,15 @@ import 'package:web/web.dart' as web;
 
 import '../../flutter_stripe_web.dart';
 
+// TODO: should not use src of other package
+export 'package:stripe_js/src/api/elements/payment_element_options.dart';
 export 'package:stripe_js/stripe_api.dart'
     show
         PaymentElementLayout,
         ElementAppearance,
         ElementTheme,
         ElementAppearanceLabels;
 
-// TODO: should not use src of other package
-export 'package:stripe_js/src/api/elements/payment_element_options.dart';
-
 typedef PaymentElementTheme = js.ElementTheme;
 
 class PaymentElement extends StatefulWidget {
@@ -169,36 +168,11 @@ class PaymentElementState extends State<PaymentElement> {
   final FocusNode _focusNode = FocusNode(debugLabel: 'CardField');
   FocusNode get _effectiveNode => widget.focusNode ?? _focusNode;
 
-  bool _isManuallyFocusing = false; // Track manual focus/blur actions
-  bool _isCurrentlyFocused = false; // Track current focus state
-
   @override
   Widget build(BuildContext context) {
     return Focus(
+      autofocus: true,
       focusNode: _effectiveNode,
-     onFocusChange: (focus) {
-        // Prevent feedback loop from manual focus/blur actions
-        if (_isManuallyFocusing) {
-          _isManuallyFocusing = false;
-          return;
-        }
-
-        // Check if the focus state has actually changed
-        if (_isCurrentlyFocused == focus) {
-          return; // No state change, do nothing
-        }
-
-        // Update the current focus state
-        _isCurrentlyFocused = focus;
-
-        if (focus) {
-          _isManuallyFocusing = true;
-          element?.focus();
-        } else {
-          _isManuallyFocusing = true;
-          element?.blur();
-        }
-      },
       child: ConstrainedBox(
         constraints: BoxConstraints(
           maxWidth: double.infinity,