@samitouri / QOS-React / commits / 69f9f4127a

Document event bubble order (#13546)

This is documenting the current order in which events are dispatched when interacting with native document listeners and other React apps. For more context, check out #12919.

Philipp committed Sep 3, 2018 at 21:39 UTC 69f9f4127a83da7f5392f4a5398481b46285df65

1 file changed +56

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

+56

@@ -2603,4 +2603,60 @@ describe('ReactDOMComponent', () => {

2603 expect(node.getAttribute('onx')).toBe('bar');

2604 });

2605 });

2606 +

2607 + it('receives events in specific order', () => {

2608 + let eventOrder = [];

2609 + let track = tag => () => eventOrder.push(tag);

2610 + let outerRef = React.createRef();

2611 + let innerRef = React.createRef();

2612 +

2613 + function OuterReactApp() {

2614 + return (

2615 + <div

2616 + ref={outerRef}

2617 + onClick={track('outer bubble')}

2618 + onClickCapture={track('outer capture')}

2619 + />

2620 + );

2621 + }

2622 +

2623 + function InnerReactApp() {

2624 + return (

2625 + <div

2626 + ref={innerRef}

2627 + onClick={track('inner bubble')}

2628 + onClickCapture={track('inner capture')}

2629 + />

2630 + );

2631 + }

2632 +

2633 + const container = document.createElement('div');

2634 + document.body.appendChild(container);

2635 +

2636 + try {

2637 + ReactDOM.render(<OuterReactApp />, container);

2638 + ReactDOM.render(<InnerReactApp />, outerRef.current);

2639 +

2640 + document.addEventListener('click', track('document bubble'));

2641 + document.addEventListener('click', track('document capture'), true);

2642 +

2643 + innerRef.current.click();

2644 +

2645 + // The order we receive here is not ideal since it is expected that the

2646 + // capture listener fire before all bubble listeners. Other React apps

2647 + // might depend on this.

2648 + //

2649 + // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674

2650 + expect(eventOrder).toEqual([

2651 + 'document capture',

2652 + 'inner capture',

2653 + 'inner bubble',

2654 + 'outer capture',

2655 + 'outer bubble',

2656 + 'document bubble',

2657 + ]);

2658 + } finally {

2659 + document.body.removeChild(container);

2660 + }

2661 + });

2662 });