[Web] Focus Loop in PaymentElement Causes Input Fields to Lose Focus Repeatedly.

[x544D]

Describe the bug

When using the PaymentElement widget from the flutter_stripe_web package, input fields lose focus instantly after being selected. This issue is observed primarily in Chrome browsers, where the Focus state toggles repeatedly, making the input fields unusable.

---

To Reproduce

Steps to reproduce the behavior:

1. Initialize the PaymentElement widget with the following parameters:

   PaymentElement(
     onCardChanged: (details) {},
     clientSecret: secret, // secret is always there.
     width: MediaQuery.of(context).size.width,
     enablePostalCode: false,
     appearance: const ElementAppearance(
       theme: ElementTheme.night,
     ),
   ),

2. Run flutter run -d chrome
3. Attempt to focus on any input field (e.g., credit card number).
4. Observe that the input loses focus immediately after gaining focus.

Screen.Recording.2024-12-23.at.23.26.29.mov

---

Expected behavior

Input fields in the PaymentElement widget should retain focus when selected, allowing users to enter their details seamlessly.

---

Smartphone / tablet

• Device: N/A (Web platform)
• Browser: Chrome Version 131.0.6778.140
• OS: macOS 14.4
• Package version: flutter_stripe_web: ^6.3.0 | flutter_stripe: ^11.3.0
• Flutter version: 3.24.4

---

Additional context

• This issue does not occur on Safari, where the widget works as expected.
• The following code logs indicate continuous focus toggling:
  upon tweaking onFocusChange to print focus as follow :

Focus Gained  
Focus Lost  

and upon uncommenting the commented :

/*  if (focus)
          element?.focus();
        else
          element?.blur(); */

the loop happens.

• Potential Cause: Interaction between Flutter’s FocusNode and the underlying iframe behavior of the Stripe Payment Element.