add portals for modal

src/components/Modal.jsx

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import Portal from 'preact-portal';
 
 export default class Modal extends Component {
 	componentDidMount() {
@@ -18,36 +19,42 @@ export default class Modal extends Component {
 		}
 	}
 	componentDidUpdate(prevProps) {
-		document.body.classList[this.props.show ? 'add' : 'remove'](
-			'overlay-visible'
-		);
-
-		if (this.props.show && !prevProps.show) {
-			this.overlayEl.querySelector('.js-modal__close-btn').focus();
+		if (this.props.show != prevProps.show) {
+			document.body.classList[this.props.show ? 'add' : 'remove'](
+				'overlay-visible'
+			);
+			if (this.props.show) {
+				// HACK: refs will evaluate on next tick due to portals
+				setTimeout(() => {
+					this.overlayEl.querySelector('.js-modal__close-btn').focus();
+				}, 0);
+			}
 		}
 	}
 	render() {
 		if (!this.props.show) return null;
 
 		return (
-			<div
-				class={`${this.props.extraClasses || ''} modal is-modal-visible`}
-				ref={el => (this.overlayEl = el)}
-				onClick={this.onOverlayClick.bind(this)}
-			>
-				<div class="modal__content">
-					<button
-						type="button"
-						onClick={this.props.closeHandler}
-						aria-label="Close modal"
-						title="Close"
-						class="js-modal__close-btn  modal__close-btn"
-					>
-						Close
-					</button>
-					{this.props.children}
+			<Portal into="body">
+				<div
+					class={`${this.props.extraClasses || ''} modal is-modal-visible`}
+					ref={el => (this.overlayEl = el)}
+					onClick={this.onOverlayClick.bind(this)}
+				>
+					<div class="modal__content">
+						<button
+							type="button"
+							onClick={this.props.closeHandler}
+							aria-label="Close modal"
+							title="Close"
+							class="js-modal__close-btn  modal__close-btn"
+						>
+							Close
+						</button>
+						{this.props.children}
+					</div>
 				</div>
-			</div>
+			</Portal>
 		);
 	}
 }