Skip to content

Commit 9c69271

Browse files
committed
[fixed] OverlayTrigger event handlers are properly maintained
fixes react-bootstrap#1140
1 parent 6c554d5 commit 9c69271

File tree

2 files changed

+24
-5
lines changed

2 files changed

+24
-5
lines changed

src/OverlayTrigger.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ const OverlayTrigger = React.createClass({
175175

176176
render() {
177177
const trigger = React.Children.only(this.props.children);
178+
const triggerProps = trigger.props;
178179

179180
const props = {
180181
'aria-describedby': this.props.overlay.props.id
@@ -183,7 +184,7 @@ const OverlayTrigger = React.createClass({
183184
// create in render otherwise owner is lost...
184185
this._overlay = this.getOverlay();
185186

186-
props.onClick = createChainedFunction(trigger.props.onClick, this.props.onClick);
187+
props.onClick = createChainedFunction(triggerProps.onClick, this.props.onClick);
187188

188189
if (isOneOf('click', this.props.trigger)) {
189190
props.onClick = createChainedFunction(this.toggle, props.onClick);
@@ -194,13 +195,13 @@ const OverlayTrigger = React.createClass({
194195
'[react-bootstrap] Specifying only the `"hover"` trigger limits the visibilty of the overlay to just mouse users. ' +
195196
'Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.');
196197

197-
props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver);
198-
props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut);
198+
props.onMouseOver = createChainedFunction(this.handleDelayedShow, this.props.onMouseOver, triggerProps.onMouseOver);
199+
props.onMouseOut = createChainedFunction(this.handleDelayedHide, this.props.onMouseOut, triggerProps.onMouseOut);
199200
}
200201

201202
if (isOneOf('focus', this.props.trigger)) {
202-
props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus);
203-
props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur);
203+
props.onFocus = createChainedFunction(this.handleDelayedShow, this.props.onFocus, triggerProps.onFocus);
204+
props.onBlur = createChainedFunction(this.handleDelayedHide, this.props.onBlur, triggerProps.onBlur);
204205
}
205206

206207
return cloneElement(

test/OverlayTriggerSpec.js

+18
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import OverlayTrigger from '../src/OverlayTrigger';
44
import Popover from '../src/Popover';
55
import Tooltip from '../src/Tooltip';
66

7+
import { render } from './helpers';
8+
79
describe('OverlayTrigger', function() {
810
it('Should create OverlayTrigger element', function() {
911
const instance = ReactTestUtils.renderIntoDocument(
@@ -39,6 +41,21 @@ describe('OverlayTrigger', function() {
3941
instance.state.isOverlayShown.should.be.true;
4042
});
4143

44+
it('Should keep trigger handlers', function(done) {
45+
const instance = render(
46+
<div>
47+
<OverlayTrigger trigger='focus' overlay={<div>test</div>}>
48+
<button onBlur={()=> done()}>button</button>
49+
</OverlayTrigger>
50+
<input id='target'/>
51+
</div>
52+
, document.body);
53+
54+
const overlayTrigger = React.findDOMNode(instance).firstChild;
55+
56+
ReactTestUtils.Simulate.blur(overlayTrigger);
57+
});
58+
4259
it('Should maintain overlay classname', function() {
4360
const instance = ReactTestUtils.renderIntoDocument(
4461
<OverlayTrigger trigger='click' overlay={<div className='test-overlay'>test</div>}>
@@ -47,6 +64,7 @@ describe('OverlayTrigger', function() {
4764
);
4865

4966
const overlayTrigger = React.findDOMNode(instance);
67+
5068
ReactTestUtils.Simulate.click(overlayTrigger);
5169

5270
expect(document.getElementsByClassName('test-overlay').length).to.equal(1);

0 commit comments

Comments
 (0)