fix(Portal): pass additional agruments to trigger handlers (#2234)

src/addons/Portal/Portal.js

@@ -226,11 +226,11 @@ class Portal extends Component {
     clearTimeout(this.mouseLeaveTimer)
   }
 
-  handleTriggerBlur = (e) => {
+  handleTriggerBlur = (e, ...rest) => {
     const { trigger, closeOnTriggerBlur } = this.props
 
     // Call original event handler
-    _.invoke(trigger, 'props.onBlur', e)
+    _.invoke(trigger, 'props.onBlur', e, ...rest)
 
     // do not close if focus is given to the portal
     const didFocusPortal = _.invoke(this, 'rootNode.contains', e.relatedTarget)
@@ -241,12 +241,12 @@ class Portal extends Component {
     this.close(e)
   }
 
-  handleTriggerClick = (e) => {
+  handleTriggerClick = (e, ...rest) => {
     const { trigger, closeOnTriggerClick, openOnTriggerClick } = this.props
     const { open } = this.state
 
     // Call original event handler
-    _.invoke(trigger, 'props.onClick', e)
+    _.invoke(trigger, 'props.onClick', e, ...rest)
 
     if (open && closeOnTriggerClick) {
       debug('handleTriggerClick() - close')
@@ -259,39 +259,39 @@ class Portal extends Component {
     }
   }
 
-  handleTriggerFocus = (e) => {
+  handleTriggerFocus = (e, ...rest) => {
     const { trigger, openOnTriggerFocus } = this.props
 
     // Call original event handler
-    _.invoke(trigger, 'props.onFocus', e)
+    _.invoke(trigger, 'props.onFocus', e, ...rest)
 
     if (!openOnTriggerFocus) return
 
     debug('handleTriggerFocus()')
     this.open(e)
   }
 
-  handleTriggerMouseLeave = (e) => {
+  handleTriggerMouseLeave = (e, ...rest) => {
     clearTimeout(this.mouseEnterTimer)
 
     const { trigger, closeOnTriggerMouseLeave, mouseLeaveDelay } = this.props
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseLeave', e)
+    _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
 
     if (!closeOnTriggerMouseLeave) return
 
     debug('handleTriggerMouseLeave()')
     this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay)
   }
 
-  handleTriggerMouseEnter = (e) => {
+  handleTriggerMouseEnter = (e, ...rest) => {
     clearTimeout(this.mouseLeaveTimer)
 
     const { trigger, mouseEnterDelay, openOnTriggerMouseEnter } = this.props
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseEnter', this.handleTriggerMouseEnter)
+    _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
 
     if (!openOnTriggerMouseEnter) return
 

test/specs/addons/Portal/Portal-test.js

@@ -1,5 +1,6 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 import { unmountComponentAtNode } from 'react-dom'
 
 import * as common from 'test/specs/commonTests'
@@ -9,6 +10,20 @@ import Portal from 'src/addons/Portal/Portal'
 let attachTo
 let wrapper
 
+const createHandlingComponent = eventName => class HandlingComponent extends Component {
+  static propTypes = {
+    handler: PropTypes.func,
+  }
+
+  handleEvent = e => this.props.handler(e, this.props)
+
+  render() {
+    const buttonProps = { [eventName]: this.handleEvent }
+
+    return <button {...buttonProps} />
+  }
+}
+
 const wrapperMount = (node, opts) => {
   wrapper = mount(node, opts)
   return wrapper
@@ -188,9 +203,9 @@ describe('Portal', () => {
     })
 
     it('maintains ref to DOM node with React component', () => {
-      const Component = () => <p />
+      const EmptyComponent = () => <p />
 
-      wrapperMount(<Portal open><Component /></Portal>)
+      wrapperMount(<Portal open><EmptyComponent /></Portal>)
       wrapper.instance().portalNode.tagName.should.equal('P')
     })
   })
@@ -209,6 +224,25 @@ describe('Portal', () => {
 
       wrapper.text().should.equal(text)
     })
+
+    _.forEach(['onBlur', 'onClick', 'onFocus', 'onMouseLeave', 'onMouseEnter'], (handlerName) => {
+      it(`handles ${handlerName} on trigger and passes all arguments`, () => {
+        const event = { target: null }
+        const handler = sandbox.spy()
+        const Trigger = createHandlingComponent(handlerName)
+        const trigger = <Trigger color='blue' handler={handler} />
+
+        wrapperMount(<Portal trigger={trigger}><p /></Portal>)
+          .find('button')
+          .simulate(_.toLower(handlerName.substring(2)), event)
+
+        handler.should.have.been.calledOnce()
+        handler.should.have.been.calledWithMatch(event, {
+          handler,
+          color: 'blue',
+        })
+      })
+    })
   })
 
   describe('mountNode', () => {