Test onClick

src/index.tsx

@@ -144,6 +144,7 @@ class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {} }> {
         this.state = {
             nodeProps: this.props.node.getInitialPortalProps(),
         };
+        this.onClick = this.onClick.bind(this);
     }
 
     addPropsChannel = () => {
@@ -163,16 +164,26 @@ class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {} }> {
         this.addPropsChannel();
     }
 
+    onClick(e:any){
+        e.stopPropagation();
+        console.log('click outer', this.props.node.element);
+        this.props.node.element.dispatchEvent(new Event('click', { bubbles: true }));
+    }
+
     render() {
         const { children, node } = this.props;
 
-        return ReactDOM.createPortal(
-            React.Children.map(children, (child) => {
-                if (!React.isValidElement(child)) return child;
-                return React.cloneElement(child, this.state.nodeProps)
-            }),
-            node.element
-        );
+        return <div id="outer" onClick={this.onClick}>
+            {
+                ReactDOM.createPortal(
+                    React.Children.map(children, (child) => {
+                        if (!React.isValidElement(child)) return child;
+                        return React.cloneElement(child, this.state.nodeProps)
+                    }),
+                    node.element
+                )
+            }
+        </div>
     }
 }
 

stories/html.stories.js

@@ -349,5 +349,68 @@ storiesOf('Portals', module)
             </div>;
         }
 
+        return <MyComponent componentToShow='component-a' />
+    }).add('Events bubbling from PortalOut', () => {
+        const MyExpensiveComponent = () => <div onClick={() => console.log('expensive')}>expensive!</div>;
+
+        const MyComponent = (props) => {
+            const portalNode = React.useMemo(() => createHtmlPortalNode(), []);
+
+            return <div>
+                {/*
+                    Create the content that you want to move around.
+                    InPortals render as normal, but to detached DOM.
+                    Until this is used MyExpensiveComponent will not
+                    appear anywhere in the page.
+                */}
+                <InPortal node={portalNode}>
+                    <MyExpensiveComponent
+                        // Optionally provide props to use before this enters the DOM
+                        myProp={"defaultValue"}
+                    />
+                </InPortal>
+
+                {/* ... The rest of your UI ... */}
+
+                {/* Pass the node to whoever might want to show it: */}
+                { props.componentToShow === 'component-a'
+                    ? <ComponentA portalNode={portalNode} />
+                    : <ComponentB portalNode={portalNode} /> }
+            </div>;
+        }
+
+        const ComponentA = (props) => {
+            const alertEvent = () => alert('Div clicked')
+            return <div onClick={alertEvent}>
+                {/* ... Some more UI ... */}
+
+                A:
+
+                <OutPortal
+                    node={props.portalNode} // Show the content from this node here
+                />
+            </div>;
+        }
+
+        const ComponentB = (props) => {
+            const alertEvent = () => alert('Div clicked')
+            return <div onClick={alertEvent}>
+                {/* ... Some more UI ... */}
+
+                B:
+
+                <OutPortal
+                    node={props.portalNode} // Pull in the content from this node
+
+                    myProp={"newValue"}     // Optionally, override default values
+                    myOtherProp={123}       // Or add new props
+
+                    // These props go back to the InPortal, and trigger a component
+                    // update (but on the same component instance) as if they had
+                    // been passed directly.
+                />
+            </div>;
+        }
+
         return <MyComponent componentToShow='component-a' />
     });