diff --git a/src/Overlay.js b/src/Overlay.js index 6db392d6aa..379aea35f9 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -78,10 +78,9 @@ class Overlay extends React.Component { ); } else { - child = cloneElement( - child, - {className: classNames('in', child.className)} - ); + child = cloneElement(child, { + className: classNames('in', child.props.className) + }); } // This goes after everything else because it adds a wrapping div. diff --git a/src/Position.js b/src/Position.js index ad9563a880..523c7973f7 100644 --- a/src/Position.js +++ b/src/Position.js @@ -1,4 +1,5 @@ import React, { cloneElement } from 'react'; +import classNames from 'classnames'; import domUtils from './utils/domUtils'; import { calcOverlayPosition } from './utils/overlayPositionUtils'; import CustomPropTypes from './utils/CustomPropTypes'; @@ -40,7 +41,7 @@ class Position extends React.Component { } render() { - const {children, ...props} = this.props; + const {children, className, ...props} = this.props; const {positionLeft, positionTop, ...arrowPosition} = this.state; const child = React.Children.only(children); @@ -51,6 +52,7 @@ class Position extends React.Component { ...arrowPosition, positionTop, positionLeft, + className: classNames(className, child.props.className), style: { ...child.props.style, left: positionLeft, diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js index 637f59d2ba..43095d13ad 100644 --- a/test/OverlayTriggerSpec.js +++ b/test/OverlayTriggerSpec.js @@ -39,6 +39,19 @@ describe('OverlayTrigger', function() { instance.state.isOverlayShown.should.be.true; }); + it('Should maintain overlay classname', function() { + const instance = ReactTestUtils.renderIntoDocument( + test}> + + + ); + + const overlayTrigger = React.findDOMNode(instance); + ReactTestUtils.Simulate.click(overlayTrigger); + + expect(document.getElementsByClassName('test-overlay').length).to.equal(1) + }); + it('Should pass transition callbacks to Transition', function (done) { let count = 0; let increment = ()=> count++;