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

Fix wheel/touch browser locking in IE and Safari #9333

Closed
wants to merge 17 commits into from
Closed

Fix wheel/touch browser locking in IE and Safari #9333

wants to merge 17 commits into from

Commits on Sep 5, 2018

  1. Locally attach wheel, scroll and touch events

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    267da68 View commit details
    Browse the repository at this point in the history

  2. Add test coverage for doubly nested event handlers

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    9b034e7 View commit details
    Browse the repository at this point in the history

  3. Attach scroll and wheel events to owner

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    f81f8db View commit details
    Browse the repository at this point in the history

  4. Track event dispatches to prevent duplicate local events 

    Scroll events need to be attached locally in order to receive
rendering optimizations in Firefox, Edge, and Safari.

Unfortunately, scroll events can be nested. When attached locally,
events bubble up through both the DOM and React event systems.

This commit adds a module that tracks what events have
dispatched. When possible, it uses a WeakSet to test membership. When
the event is fully dispatched, it should be released with GC.

For browsers that do not support WeakSets, this module modifies the
event with a flag. This needs to be tested in IE.
    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    6376bc5 View commit details
    Browse the repository at this point in the history

  5. Bubble scroll/wheel for consistency. Capturing does not matter

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    92fb9d8 View commit details
    Browse the repository at this point in the history

  6. Check event, not tracker

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    c6216e9 View commit details
    Browse the repository at this point in the history

  7. Revert flow-type change

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    e3e4eb5 View commit details
    Browse the repository at this point in the history

  8. Release events from tracking when they bubble to the root

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    079474d View commit details
    Browse the repository at this point in the history

  9. Fix flow

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    adb0992 View commit details
    Browse the repository at this point in the history

  10. Add WeakSet to eslint config

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    310b87b View commit details
    Browse the repository at this point in the history

  11. Eliminate root listener by tracking target 

    Prior work included an event listener on the root container that would
release events from tracking. This is not necessary. Instead, we can
track the last currentTarget to see if the dispatch should be counted.

This appears to work for both bubbling and capture. Assuming the
following markup:

```html
<div id="top" onScroll={...}>
  <div id="middle" onScroll={...}>
    <div id="bottom" onScroll={...} />
  </div>
</div>
```

Assume all levels have a local scroll listener. If we dispatch from
the bottom:

1. The first target is the "top", because we assign it as
  captured. Capture works in reverse.
2. "middle" is skipped because the event is tracked to "top"
3. "bottom" is skipped because the event is trakced to "top"

This means that only one synthetic event dispatch occurs once.
    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    635ee17 View commit details
    Browse the repository at this point in the history

  12. Add additional test cases from commit

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    635854d View commit details
    Browse the repository at this point in the history

  13. Make the linter happy

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    4967ed1 View commit details
    Browse the repository at this point in the history

  14. Eliminate duplicate local listener tests in ReactDOMComponent-test

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    ebf431b View commit details
    Browse the repository at this point in the history

  15. Touch events should be bubbled

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    ec4c2e2 View commit details
    Browse the repository at this point in the history

  16. Attach touch events locally, add tests to ensure bubble order

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    1 Configuration menu
    Copy the full SHA
    e7884fc View commit details
    Browse the repository at this point in the history

  17. Add additional test cases and restructure tests

    @nhunzaker
    nhunzaker committed Sep 5, 2018
    Configuration menu
    Copy the full SHA
    62ce2ff View commit details
    Browse the repository at this point in the history