Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Android] fix: card field focus jumps back to the card number field #630

Merged
merged 7 commits into from
Mar 3, 2022
Merged

[Android] fix: card field focus jumps back to the card number field #630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
06e48d4
fix: card field focus jumping back to the card numbr field
arekkubaczkowski Oct 7, 2021
68fe413
chore: re-run tests
arekkubaczkowski Oct 11, 2021
ab53a4b
chore: set profile
arekkubaczkowski Oct 11, 2021
59f6374
chore: revert
arekkubaczkowski Oct 11, 2021
ceb6600
chore: set galaxy nexus as a profile
arekkubaczkowski Oct 11, 2021
87b23ef
Update example/index.js
charliecruzan-stripe Mar 3, 2022
1231fc6
[skip actions] Update android/src/main/java/com/reactnativestripesdk/…
charliecruzan-stripe Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/e2e-tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ jobs:
with:
api-level: 30
arch: x86_64
profile: Galaxy Nexus
target: google_apis
force-avd-creation: false
disable-animations: true
Expand Down
19 changes: 13 additions & 6 deletions android/src/main/java/com/reactnativestripesdk/StripeSdkCardView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
return cardDetails
}

fun onCardChanged() {
fun onValidCardChange() {
mCardWidget.paymentMethodCard?.let {
cardParams = it
cardAddress = Address.Builder()
Expand All @@ -193,14 +193,21 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
cardDetails["brand"] = null
cardDetails["last4"] = null
}
sendCardDetailsEvent()
}

private fun sendCardDetailsEvent() {
mEventDispatcher?.dispatchEvent(
CardChangedEvent(id, cardDetails, mCardWidget.postalCodeEnabled, cardParams != null, dangerouslyGetFullCardDetails))
}

private fun setListeners() {
mCardWidget.setCardValidCallback { isValid, _ ->
if (isValid) {
onCardChanged()
onValidCardChange()
} else {
cardParams = null
cardAddress = null
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this else case where it is not vali do you still need to sendCardDetailsEvent

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michelleb-stripe yes and I do this, you can find the calls in the particulars text fields listeners

stripe-react-native/android/src/main/java/com/reactnativestripesdk/StripeSdkCardView.kt

Line 238 in 06e48d4

sendCardDetailsEvent()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that would mean that the CardValidCallback would always need to be followed by a TextWatcher. I am not sure this is a guarantee we can make.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @michelleb-stripe I'm taking this over from Arek but I'm not sure I get this properly. Can you please help me understanding the problem?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@souhe Let me try to explain more. The setExpiryDateTextWatcher and setPostalCodeTextWatchedr called onCardChanged, which will get the paymentMethodCreateParams without first checking to see if they are valid. Because of how a query on the paymentMethodCreateParams works it will change the focus on the widget, to the first field that is invalid.

paymentMethodCreateParams should only be called from the CardValidCallback.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michelleb-stripe I'm afraid I'm still confused :D Are you describing your previous comment or this whole issues?

If the first one then I'm not getting why calling sendCardDetailsEvent from setExpiryDateTextWatcher or setPostalCodeTextWatcher would call paymentMethodCreateParams.

If the second one I'm still not sure what this means - I think that would mean that the CardValidCallback would always need to be followed by a TextWatcher. I am not sure this is a guarantee we can make. Why is that true? If I understand the code created by Arek properly we are sending sendCardDetailsEvent on every change from each watcher so that is why there is no need to send this even once again from cardValidCallback (when card is invalid)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay. Looking at it again it looks good to me.

}
}

Expand Down Expand Up @@ -228,7 +235,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
cardDetails["expiryYear"] = var1.toString().split("/")[1].toIntOrNull()
}

onCardChanged()
sendCardDetailsEvent()
}
})

Expand All @@ -237,7 +244,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
override fun afterTextChanged(p0: Editable?) {}
override fun onTextChanged(var1: CharSequence?, var2: Int, var3: Int, var4: Int) {
cardDetails["postalCode"] = var1.toString()
onCardChanged()
sendCardDetailsEvent()
}
})

Expand All @@ -248,15 +255,15 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
if (dangerouslyGetFullCardDetails) {
cardDetails["number"] = var1.toString().replace(" ", "")
}
onCardChanged()
sendCardDetailsEvent()
}
})

mCardWidget.setCvcNumberTextWatcher(object : TextWatcher {
override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {}
override fun afterTextChanged(p0: Editable?) {}
override fun onTextChanged(var1: CharSequence?, var2: Int, var3: Int, var4: Int) {
onCardChanged()
sendCardDetailsEvent()
}
})
}
Expand Down