Flutter Stripe Web: Unable to tab from card field to the next input text field

[OZ79]

Describe the bug
User is unable to tab from card input field to the next input text field to set the focus. Cursor is on the last section of the card field and does not move to the next input field.

To Reproduce

...
Column(
              children: [
                CardField(),
                TextField(),
                TextField(),
              ],
            ),
...

Steps to reproduce the behavior:

1. Click on card field
2. Tab through card field and then to next input field

Expected behavior
User is able to successfully tab through all fields

Smartphone / tablet

• Device: MacBook Pro (Retina, 15-inch, Mid 2015).
• OS: MacOS Monterey v12.7.2
• Package version: flutter_stripe: ^9.3.0 flutter_stripe_web: ^4.3.0
• Flutter version 3.16.4

Additional context
Google Chrome Version 124.0.6367.60 (Official Build) (x86_64)

[kanghuicong]

I encountered the same issue.

[remonh87]

The solution is to use FocusNode to programmatically manage focus and move it to the next widget after the CardField is completed.

Steps:
Define a FocusNode for the first TextField.

final nextFieldFocusNode = FocusNode();

Assign the FocusNode to the first TextField.

TextField(focusNode: nextFieldFocusNode),

Use the onCardChanged callback of the CardField to check if the card is complete (complete is true). If it is, use the FocusNode to shift focus.

CardField(
  onCardChanged: (card) {
    if (card != null && card.complete == true) {
      nextFieldFocusNode.requestFocus();
    }
  },
  // ... other CardField props
),

This ensures that when the card input is finished, the focus is explicitly moved to the next input field, bypassing the internal focus trapping issue.