Focus issue with card view

[jonasbark]

Every other attempt to write into the native card view fails, at least on Android - it might be fixed with the FocusNode adjustment that currently happens on the native side made by @jamesblasco for iOS

Otherwise it needs to be investigated on on the Android side

[remonh87]

@jonasbark can you provide me some reprosteps? I am not sure I understand what you mean with this

[jonasbark]

Open any screen with a card, tap into the card view itself and then back and forth to the email field for example. You should notice that sometimes the card view doesn't accept the keyboards input anymore.

I think it's something we can fix on the dart side

[jonasbark]

This still happens with the changes included from latest PR

device-2021-04-18-172045.mp4

[jonasbark]

flutter/flutter#80961

[bradsb]

@jonasbark @jamesblasco Could either of you confirm for me that this issue is currently fixed with flutter master? I've switched to both flutter dev and flutter master and added the plugin using a git reference to my pubspec, and am still experiencing the keyboard switching issue mentioned and shown in a video in #135. The keyboard also still changes focus back to the card number when trying to enter the expiration date with the card number incomplete. I did not however run into the problem shown above #14 (comment)

  flutter_stripe:
    git:
      url: git@github.com:flutter-stripe/flutter_stripe.git
      path: packages/stripe
      ref: e7aa625

[✓] Flutter (Channel master, 2.3.0-17.0.pre.417, on macOS 11.4 20F71 darwin-x64, locale en-US)
    • Flutter version 2.3.0-17.0.pre.417 at /Users/user/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 46c546684f (2 days ago), 2021-06-21 12:04:43 -0700
    • Engine revision 9520bb15b3
    • Dart version 2.14.0 (build 2.14.0-228.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/brad/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (2 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 91.0.4472.114

• No issues found!

We can't use the payment sheet (unless I'm misunderstanding) because we need to use setup intents in order to offer promo codes with 100% discount at the beginning of subscriptions. And because we function in Europe we have to be able to handle 3D secure which doesn't work with the old flutter stripe payment plugin jonasbark/flutter_stripe_payment#253

[jonasbark]

I can confirm that it worked when I tried flutter from the master channel - I'm not sure if they might have reverted the flutter fix by now.
You can use the main branch of this plugin, the fix is included there.

[bradsb]

@jonasbark I updated my pubspec to use the main branch here. Here is the main issue I'm seeing but maybe it is a separate issue:

Keyboard switching (Android):

  flutter_stripe:
    git:
      url: git@github.com:flutter-stripe/flutter_stripe.git
      path: packages/stripe
      ref: main

[jonasbark]

Which flutter version do you use exactly?

[bradsb]

@jonasbark Right now I'm on the flutter master branch which is 2.3.0-17.0.pre.417 and I also tried the dev sdk which looks to be at 2.3.0-24.0.pre when I tried it.

[✓] Flutter (Channel master, 2.3.0-17.0.pre.417, on macOS 11.4 20F71 darwin-x64, locale en-US)
    • Flutter version 2.3.0-17.0.pre.417 at /Users/user/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 46c546684f (2 days ago), 2021-06-21 12:04:43 -0700
    • Engine revision 9520bb15b3
    • Dart version 2.14.0 (build 2.14.0-228.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/brad/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (2 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 91.0.4472.114

• No issues found!

I'm seeing this in the logs when the view appears

[ +259 ms] W/View    ( 9564): requestLayout() improperly called by android.widget.FrameLayout{8e957b7 VFE...... ......ID 161,35-1012,94 #7f0800b0 app:id/container} during layout: running second layout pass
[   +2 ms] W/View    ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{29e4b24 V.ED..... ......ID 0,0-400,59 #7f080093 app:id/card_number_text_input_layout} during layout: running second layout pass
[        ] W/View    ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{a23268d V.ED..... ......ID 550,0-697,59 #7f080109 app:id/expiry_date_text_input_layout} during layout: running second layout pass
[        ] W/View    ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{4c49042 V.ED..... ......ID 2750,0-2750,59 #7f0800c0 app:id/cvc_text_input_layout} during layout: running second layout pass

And this after each number is entered

[+28570 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection
[+3394 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection
[+2492 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection

[jonasbark]

Just tested it again, works as expected on

[✓] Flutter (Channel master, 2.3.0-17.0.pre.505, on macOS 11.2.3 20D91 darwin-x64, locale de-DE)

and my Android 10 test device

[artemtkachenko]

@jonasbark
pixel 3; android 11;

Flutter 2.3.0-24.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 615957513e (4 days ago) • 2021-06-25 09:24:44 -0700
Engine • revision 9d517f475b
Tools • Dart 2.14.0 (build 2.14.0-188.5.beta)

face the same issue mentioned above by @bradsb

[jonasbark]

Does the example app from this repository show the same issue for you?

[julesbacon]

@jonasbark do you know if this has been addressed on the flutter_stripe side as well or is the only current solution to use Flutter 2.3.0? I'm currently on Flutter 2.2.2 and haven't been able to find a workaround

[ApofisXII]

@hoangtrinhtiki in the last months the issue was exactly the wrong type of keyboard shown, different from the expected (numeric keyboard)

[huzaifah0x00]

@hoangtrinhtiki in the last months the issue was exactly the wrong type of keyboard shown, different from the expected (numeric keyboard)

I think this (wrong keyboard type) is fixed with the launch of flutter 2.5.0 ( works for me at least, with flutter 2.5.0), but the other focus issues still remain.

[daveols]

We finally got a response on flutter/flutter#86480 but unfortunately the suggested fix did not resolve the issue I was seeing (Cannot type in CardField following a another field being focused).

I've opened a PR with the suggested fix anyway in case it resolves any of the other problems described by others in this thread (#365).

If anyone would like to test the fix against their own issues, try building with this version of the package:

flutter_stripe:
  git:
    url: git://github.com/daveols/flutter_stripe.git
    path: packages/stripe
    ref:  add-onfocus-param

[jonasbark]

Good news everyone - this issue has been fixed and a new version will be published by the end of this week!

[bradsb]

@jonasbark It seems the fix was only done in CardField and not in CardFormField (#366).

You can see that you are still unable to type on Android if you navigate to the Card Payments -> Simple - Using Webhooks in the example app and type in the email field and then navigate to the Card Payments -> Card Form and try to type in the field.

[jonasbark]

The fix has also been applied to the CardFormField and it works well for me, even with the steps you added.
If you can reproduce it every time please open a new ticket with a full bug description.

[bradsb]

@jonasbark I will open a new issue asap.

However, in main with #366 merged, CardField's _MethodChannelCardFieldState build method was modified to return only the ConstrainedBox and remove _handleFrameworkFocusChanged as can be seen in the git diff of the PR. This was not done in CardFormField's _MethodChannelCardFormFieldState which still returns Listener with Focus using _handleFrameworkFocusChanged.

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

Lines 317 to 333 in 8e48dbb

	return Listener(
	onPointerDown: (_) {
	if (!_effectiveNode.hasFocus) {
	_effectiveNode.requestFocus();
	}
	},
	child: Focus(
	autofocus: true,
	descendantsAreFocusable: false,
	focusNode: _effectiveNode,
	onFocusChange: _handleFrameworkFocusChanged,
	child: ConstrainedBox(
	constraints: constraints,
	child: platform,
	),
	),
	);

[infazA]

Good news everyone - this issue has been fixed and a new version will be published by the end of this week!

It seems not fixed even in the latest version 2.0.1, still keyboard type is alphanumeric

[jonasbark]

@infazA upgrade your Flutter version - it still falls back to alpha on old versions.

[infazA]

@infazA upgrade your Flutter version - it still falls back to alpha on old versions.

Thanks for the suggestion, working as expected.

[randomrandom]

It works better now, but it still has some weird behaviour on Android, iOS is just fine.

You can see a video here: https://photos.app.goo.gl/ya85HzZtPwtWC1Ru8

[ianBtesser]

CardField works for me but CardFormField still does not. I've upgraded flutter (today) and am using the most recent version of flutter_stripe. Can anyone help?

Among (many) other things, I see this line in the terminal after it fails:

E/flutter ( 4672): Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).