Merge pull request react-bootstrap#1253 from react-bootstrap/trigger-…

…handlers [fixed] OverlayTrigger event handlers are properly maintained
uptrend-tech · Aug 29, 2015 · 852c569 · 852c569
2 parents 6c554d5 + 9c69271
commit 852c569
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
@@ -175,6 +175,7 @@ const OverlayTrigger = React.createClass({
 
   render() {
     const trigger = React.Children.only(this.props.children);
+    const triggerProps = trigger.props;
 
     const props = {
       'aria-describedby': this.props.overlay.props.id
@@ -183,7 +184,7 @@ const OverlayTrigger = React.createClass({
     // create in render otherwise owner is lost...
     this._overlay = this.getOverlay();
 
-    props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
+    props.onClick = createChainedFunction(triggerProps.onClick, this.props.onClick);
 
     if (isOneOf('click', this.props.trigger)) {
       props.onClick = createChainedFunction(this.toggle, props.onClick);
@@ -194,13 +195,13 @@ const OverlayTrigger = React.createClass({
         '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
         'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
 
-      props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
-      props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
+      props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver, triggerProps.onMouseOver);
+      props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut, triggerProps.onMouseOut);
     }
 
     if (isOneOf('focus', this.props.trigger)) {
-      props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
-      props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
+      props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus, triggerProps.onFocus);
+      props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur, triggerProps.onBlur);
     }
 
     return cloneElement(

diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
@@ -4,6 +4,8 @@ import OverlayTrigger from '../src/OverlayTrigger';
 import Popover from '../src/Popover';
 import Tooltip from '../src/Tooltip';
 
+import { render } from './helpers';
+
 describe('OverlayTrigger', function() {
   it('Should create OverlayTrigger element', function() {
     const instance = ReactTestUtils.renderIntoDocument(
@@ -39,6 +41,21 @@ describe('OverlayTrigger', function() {
     instance.state.isOverlayShown.should.be.true;
   });
 
+  it('Should keep trigger handlers', function(done) {
+    const instance = render(
+      <div>
+        <OverlayTrigger trigger='focus' overlay={<div>test</div>}>
+          <button onBlur={()=> done()}>button</button>
+        </OverlayTrigger>
+        <input id='target'/>
+      </div>
+    , document.body);
+
+    const overlayTrigger = React.findDOMNode(instance).firstChild;
+
+    ReactTestUtils.Simulate.blur(overlayTrigger);
+  });
+
   it('Should maintain overlay classname', function() {
     const instance = ReactTestUtils.renderIntoDocument(
       <OverlayTrigger trigger='click' overlay={<div className='test-overlay'>test</div>}>
@@ -47,6 +64,7 @@ describe('OverlayTrigger', function() {
     );
 
     const overlayTrigger = React.findDOMNode(instance);
+
     ReactTestUtils.Simulate.click(overlayTrigger);
 
     expect(document.getElementsByClassName('test-overlay').length).to.equal(1);