fix(android): keyboard not appearing on first tap for CardField (#2291)

* fix(android): keyboard not appearing on first tap for CardField (#2286)

Wrap Android CardField and CardFormField with Listener + Focus widgets
to match iOS implementation. This ensures touch events properly trigger
focus requests, which in turn invoke native keyboard display.

* fix(stripe_js): migrate tests from dart:js to dart:js_interop

Author: meylis1998

example/lib/main.dart

@@ -2,7 +2,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_stripe/flutter_stripe.dart';
-import 'package:stripe_example/.env.dart';
+import '.env.example.dart';
 import 'screens/screens.dart';
 import 'widgets/dismiss_focus_overlay.dart';
 

packages/stripe/lib/src/widgets/card_field.dart

@@ -431,12 +431,25 @@ class _MethodChannelCardFieldState extends State<_MethodChannelCardField>
 
     Widget platform;
     if (defaultTargetPlatform == TargetPlatform.android) {
-      platform = _AndroidCardField(
-        key: _MethodChannelCardField._key,
-        viewType: _MethodChannelCardField._viewType,
-        creationParams: creationParams,
-        onPlatformViewCreated: onPlatformViewCreated,
-        androidPlatformViewRenderType: widget.androidPlatformViewRenderType,
+      platform = Listener(
+        onPointerDown: (_) {
+          if (!widget.focusNode.hasFocus) {
+            widget.focusNode.requestFocus();
+          }
+        },
+        child: Focus(
+          autofocus: widget.autofocus,
+          descendantsAreFocusable: true,
+          focusNode: widget.focusNode,
+          onFocusChange: _handleFrameworkFocusChanged,
+          child: _AndroidCardField(
+            key: _MethodChannelCardField._key,
+            viewType: _MethodChannelCardField._viewType,
+            creationParams: creationParams,
+            onPlatformViewCreated: onPlatformViewCreated,
+            androidPlatformViewRenderType: widget.androidPlatformViewRenderType,
+          ),
+        ),
       );
     } else if (defaultTargetPlatform == TargetPlatform.iOS) {
       platform = Listener(

packages/stripe/lib/src/widgets/card_form_field.dart

@@ -330,11 +330,24 @@ class _MethodChannelCardFormFieldState
 
     Widget platform;
     if (defaultTargetPlatform == TargetPlatform.android) {
-      platform = _AndroidCardFormField(
-        key: _MethodChannelCardFormField._key,
-        viewType: _MethodChannelCardFormField._viewType,
-        creationParams: creationParams,
-        onPlatformViewCreated: onPlatformViewCreated,
+      platform = Listener(
+        onPointerDown: (_) {
+          if (!widget.focusNode.hasFocus) {
+            widget.focusNode.requestFocus();
+          }
+        },
+        child: Focus(
+          autofocus: widget.autofocus,
+          descendantsAreFocusable: true,
+          focusNode: widget.focusNode,
+          onFocusChange: _handleFrameworkFocusChanged,
+          child: _AndroidCardFormField(
+            key: _MethodChannelCardFormField._key,
+            viewType: _MethodChannelCardFormField._viewType,
+            creationParams: creationParams,
+            onPlatformViewCreated: onPlatformViewCreated,
+          ),
+        ),
       );
     } else if (defaultTargetPlatform == TargetPlatform.iOS) {
       platform = Listener(

packages/stripe_js/test/src/loader/initial_state_test.dart

@@ -2,14 +2,15 @@
 
 @TestOn('browser')
 @Tags(["browser"])
-import 'dart:js';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 import 'package:test/test.dart';
 
 void main() {
   group('StripeLoader', () {
     test('Stripe is not loaded by default', () {
-      expect(context['Stripe'], isNull);
+      expect(globalContext['Stripe'], isNull);
     });
   });
 }

packages/stripe_js/test/src/loader/stripe_loader_test.dart

@@ -2,7 +2,8 @@
 
 @TestOn('browser')
 @Tags(["browser"])
-import 'dart:js';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 import 'package:stripe_js/stripe_js.dart';
 import 'package:test/test.dart';
@@ -11,7 +12,7 @@ void main() {
   group('StripeLoader', () {
     test('loads Stripe library', () async {
       await loadStripe();
-      expect(context['Stripe'], isNotNull);
+      expect(globalContext['Stripe'], isNotNull);
     });
 
     test('Stripe can be initialized', () async {