Fix nested trigger

examples/nested.js

@@ -0,0 +1,59 @@
+/* eslint no-console:0 */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Trigger from 'rc-trigger';
+import 'rc-trigger/assets/index.less';
+
+const builtinPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+};
+
+const Test = React.createClass({
+  render() {
+    return (
+      <div>
+        <Trigger
+          popupPlacement="right"
+          action={['click']}
+          builtinPlacements={builtinPlacements}
+          popup={<div style={{border: '1px solid red', padding: 10}}>i am a click popup</div>}>
+          <Trigger
+            popupPlacement="bottom"
+            action={['hover']}
+            builtinPlacements={builtinPlacements}
+            popup={<div style={{border: '1px solid red', padding: 10}}>i am a hover popup</div>}>
+            <span href="#" style={{margin: 20}}>trigger</span>
+          </Trigger>
+        </Trigger>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<div>
+  <Test />
+</div>, document.getElementById('__react-content'));

src/Trigger.jsx

@@ -300,6 +300,11 @@ const Trigger = React.createClass({
       newChildProps.onBlur = createChainedFunction(this.onBlur, childProps.onBlur);
     }
 
+    ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter',
+     'onMouseLeave', 'onFocus', 'onBlur'].forEach(handler => {
+       newChildProps[handler] = createChainedFunction(props[handler], newChildProps[handler]);
+     });
+
     return React.cloneElement(child, newChildProps);
   },
 });

tests/index.spec.js

@@ -167,6 +167,49 @@ describe('rc-trigger', function main() {
         next();
       }], done);
     });
+
+    it('nested action works', (done)=> {
+      const Test = React.createClass({
+        render() {
+          return (
+            <Trigger action={['click']}
+              popupAlign={placementAlignMap.left}
+              ref="clickTrigger"
+              popup={<strong>click trigger</strong>}>
+              <Trigger action={['hover']}
+                popupAlign={placementAlignMap.left}
+                ref="hoverTrigger"
+                popup={<strong>hover trigger</strong>}>
+                <div className="target">trigger</div>
+              </Trigger>
+            </Trigger>
+          );
+        },
+      });
+      const trigger = ReactDOM.render(<Test />, div);
+
+      const target = scryRenderedDOMComponentsWithClass(trigger, 'target')[0];
+      // can not simulate mouseenter
+      Simulate.mouseEnter(target);
+      Simulate.click(target);
+      async.series([timeout(100), (next)=> {
+        const clickPopupDomNode = trigger.refs.clickTrigger.getPopupDomNode();
+        const hoverPopupDomNode = trigger.refs.hoverTrigger.getPopupDomNode();
+        expect(clickPopupDomNode).to.be.ok();
+        expect(hoverPopupDomNode).to.be.ok();
+        Simulate.mouseLeave(target);
+        next();
+      }, timeout(100), (next)=> {
+        const hoverPopupDomNode = trigger.refs.hoverTrigger.getPopupDomNode();
+        expect($(hoverPopupDomNode).css('display')).to.be('none');
+        Simulate.click(target);
+        next();
+      }, timeout(100), (next)=> {
+        const clickPopupDomNode = trigger.refs.clickTrigger.getPopupDomNode();
+        expect($(clickPopupDomNode).css('display')).to.be('none');
+        next();
+      }], done);
+    });
   });
 
   describe('placement', ()=> {