Skip to content

Commit

Permalink
Merge pull request react-bootstrap#1253 from react-bootstrap/trigger-…
Browse files Browse the repository at this point in the history
…handlers

[fixed] OverlayTrigger event handlers are properly maintained
  • Loading branch information
jquense committed Aug 29, 2015
2 parents 6c554d5 + 9c69271 commit 852c569
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 5 deletions.
11 changes: 6 additions & 5 deletions src/OverlayTrigger.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -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(
Expand Down
18 changes: 18 additions & 0 deletions test/OverlayTriggerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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>}>
Expand All @@ -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);
Expand Down

0 comments on commit 852c569

Please sign in to comment.