Skip to content

fix: prevent focus loop in PaymentElement widget#2022

Merged
remonh87 merged 2 commits intoflutter-stripe:mainfrom
x544D:fix/focus-loop-in-payment-element
Jan 18, 2025
Merged

fix: prevent focus loop in PaymentElement widget#2022
remonh87 merged 2 commits intoflutter-stripe:mainfrom
x544D:fix/focus-loop-in-payment-element

Conversation

@x544D
Copy link
Contributor

@x544D x544D commented Dec 23, 2024

What does this PR do?

This PR fixes an issue where the PaymentElement widget from the flutter_stripe_web package repeatedly toggles focus when an input field is selected, causing the input to lose focus. This issue occurred due to a feedback loop of focus/blur events.

Changes Made:

  • Added flags (_isManuallyFocusing, _isCurrentlyFocused) to prevent focus/blur recursion.
  • Ensured that focus state change only occurs if there's an actual change in focus.
  • Prevented unnecessary calls to element?.focus() and element?.blur() based on the new conditions.

Testing:

  • Tested the fix locally in Chrome.
  • Verified that the PaymentElement input fields retain focus and the focus state toggling issue is resolved.
Screen.Recording.2024-12-23.at.23.59.42.mov

Fixes #2021

Copy link
Member

@remonh87 remonh87 left a comment

Choose a reason for hiding this comment

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

Looks good can you check my comment else we can integrate it.

@remonh87 remonh87 merged commit 3da3f4b into flutter-stripe:main Jan 18, 2025
2 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants