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 Event Replaying in Flare by Eagerly Adding Active Listeners #17933

Merged
merged 2 commits into from
Jan 30, 2020

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jan 30, 2020

This effectively reverts part of #17513. I duplicated the event replaying tests to now include Flare too, just like the partial hydration tests already did. The existing tests only covered passive events.

The primary problem is that if there is no active listener attached, then the IS_ACTIVE flag isn't passed into DEPRECATED_dispatchEventForResponderEventSystem. So the replaying of the events, like Press, that normally listen to active events doesn't work.

Replaying doesn't technically need to be active for all events. It's not guaranteed to always work to preventDefault if the code hasn't loaded yet. We could make the listeners attached as passive in the DOM but still pass the IS_ACTIVE flag. That would still "work" but it wouldn't actually work to prevent default.

The problem is that we do use a best-effort attempt to allow preventDefault to work. Most of the time it just works because we are able to synchronously hydrate within the event. That's also how we preventDefault on links to prevent the browser from taking over.

So I think ideally, at least some event should still be attached as active such as submit, click and the key events. We don't have to make them all active. Notably the ones that can cause problems for scroll optimizations and such are the pointer events.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 30, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 30, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 16c213b:

Sandbox Source
elegant-wiles-fveo7 Configuration

@sizebot
Copy link

sizebot commented Jan 30, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 16c213b

@sizebot
Copy link

sizebot commented Jan 30, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 16c213b

Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

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

The changes look good. Once we move over to useEvent we can look at how we handle active/passive events during hydration for replay again. I have a feeling much of this will get organiclly resolved by the better approach that API takes.

@sebmarkbage sebmarkbage merged commit e98797f into facebook:master Jan 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants