Prevent scrolling up when opening a dialog (#29832)

Automattic · Jan 3, 2019 · 947fa04 · 947fa04
1 parent 7a0b6cd
commit 947fa04
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/client/components/dialog/dialog-base.jsx b/client/components/dialog/dialog-base.jsx
@@ -56,14 +56,11 @@ class DialogBase extends Component {
 				appElement={ document.getElementById( 'wpcom' ) }
 				overlayClassName={ backdropClassName } // We use flex here which react-modal doesn't
 				className={ dialogClassName }
+				htmlOpenClassName="ReactModal__Html--open"
 				role="dialog"
 				shouldCloseOnEsc={ shouldCloseOnEsc }
 			>
-				<div
-					className={ classnames( this.props.className, contentClassName ) }
-					ref="content"
-					tabIndex="-1"
-				>
+				<div className={ classnames( this.props.className, contentClassName ) } tabIndex="-1">
 					{ this.props.children }
 				</div>
 				{ this._renderButtonsBar() }
@@ -80,7 +77,7 @@ class DialogBase extends Component {
 		}
 
 		return (
-			<div className={ buttonsClassName } ref="actionButtons">
+			<div className={ buttonsClassName }>
 				{ this.props.buttons.map( this._renderButton, this ) }
 			</div>
 		);

diff --git a/client/components/dialog/style.scss b/client/components/dialog/style.scss
@@ -139,3 +139,7 @@
 .ReactModal__Body--open {
 	overflow: hidden;
 }
+
+.ReactModal__Html--open {
+	overflow: visible;
+}