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.

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

fix: prevent focus loop in PaymentElement widget #2022

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

x544D
Copy link

@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.

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