CardField loses focus when screen is rebuilt

[AndreHaueisen]

Describe the bug CardField loses focus when the screen is rebuilt. In the video, when the list occupies the whole screen, the Scaffold needs to be rebuilt to accommodate the keyboard. When that happens, the CardFiled loses focus, causing the keyboard to disappear. Notice that when the Keyboard has enough space, the Scaffold does not resize and everything works as expected.

To Reproduce Steps to reproduce the behavior:

https://github.com/flutter-stripe/flutter_stripe/assets/13854934/10c9c6b1-275d-42aa-a53b-87a4f4a64176

Expected behavior I'd expect the CardField to keep its focus.

Smartphone / tablet

• iPhone SE, 3rd generation (this problem only happens on iOS)
• iOS 17
• flutter_stripe version: 9.6.0 (this has been a problem for at least a year, so it is not specific to this version)
• Flutter version: 3.16.3

Additional context

Code for the video above

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ...List.generate(
            40,
            (index) => Text('Item $index'),
          ),
          CardField(),
        ],
      ),
    );
  }
}

[ibrahimtelman]

I have a similar issue with CardFiled. After editing another widget on the same page KeepVisibleOnFocus widget produces an error that is ''' Exception has occurred. FlutterError (This widget has been unmounted, so the State no longer has a context (and should be considered defunct). Consider canceling any active work during "dispose" or using the "mounted" getter to determine if the State is still active.) '''

[remonh87]

This maybe fixed in #1539 .

Keep in mind it is not advisable to add the cardfield into complex widgets structures. Reason is that it is a native widget (due to security reasons we cannot create a flutter one) . I recommend using the paymentsheet since it has far superior ux, localisation and configuration capabilities.

[AndreHaueisen]

@remonh87 Thanks for looking into it and for the tip! 🍻

[AndreHaueisen]

Update: Using version 10.0.0 now and this is not fixed. It also happens with CardFormField

[adamori]

I have a similar issue with CardFiled. After editing another widget on the same page KeepVisibleOnFocus widget produces an error that is ''' Exception has occurred. FlutterError (This widget has been unmounted, so the State no longer has a context (and should be considered defunct). Consider canceling any active work during "dispose" or using the "mounted" getter to determine if the State is still active.) '''

Moving from 9.6.0 to 10.0.0 is fixing the issue.

Steps to reproduce in 9.6.0:

1. Display CardField in modal along with some other focusable elements
2. Move focus between elements > 2-3 times
3. Close the modal
4. Enjoy