Fix version picker x overlay interaction (#1410)

Author: sfc-gh-dmatthews

components/utilities/search.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import classNames from "classnames";
 import FocusTrap from "focus-trap-react";
 import { useRouter, withRouter } from "next/router";
@@ -27,14 +28,7 @@ const Search = () => {
     if (e && e.currentTarget !== e.target) {
       return;
     }
-
     setIsModalOpen(!isModalOpen);
-
-    if (document.body.style.overflow == "hidden") {
-      document.body.style.overflow = "unset";
-    } else {
-      document.body.style.overflow = "hidden";
-    }
   };
 
   const focus = () => {
@@ -46,20 +40,17 @@ const Search = () => {
 
   const searchClicked = () => {
     setIsModalOpen(true);
-    document.body.style.overflow = "hidden";
     focus();
   };
 
   const handleKey = (e) => {
     if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
       e.preventDefault(); // prevent "Save Page" from getting triggered.
       setIsModalOpen(true);
-      document.body.style.overflow = "hidden";
       focus();
     }
     if (e.key === "Escape") {
       setIsModalOpen(false);
-      document.body.style.overflow = "unset";
     }
     if (isModalOpen === true) {
       const resultCount = document.querySelectorAll(".ais-Hits-item").length;
@@ -264,7 +255,10 @@ const Search = () => {
         <p className={styles.SearchText}>Search</p>
         {windowWidth > 1024 && <p className={styles.HotKey}>{hotkey}</p>}
       </section>
-      {modal}
+      {/* Render modal via portal to escape header's stacking context */}
+      {typeof document !== "undefined" && modal
+        ? createPortal(modal, document.body)
+        : null}
       {/* <SearchBox /> */}
     </section>
   );

components/utilities/search.module.css

@@ -1,6 +1,6 @@
 /* Modal */
 .ModalContainer {
-  @apply fixed w-screen h-screen top-0 left-0 flex items-center justify-center z-elevated;
+  @apply fixed w-screen h-screen top-0 left-0 flex items-center justify-center z-overlay;
 }
 
 .Modal {

styles/globals.css

@@ -19,12 +19,15 @@
  *                   Files: sideBar.module.css, image.module.css, refCard.module.css
  *
  * z-elevated (10) - Code blocks, search, floating nav, nav icons
- *                   Files: code.module.css, autofunction.module.css, search.module.css,
+ *                   Files: code.module.css, autofunction.module.css,
  *                          floatingNav.module.css, navChild.module.css, componentSlider.module.css
  *
  * z-base (0)      - Default layer, code line highlights
  *
- * z-modal (100)   - Reserved for modals and dialogs (future use)
+ * z-overlay (90)  - Full-screen overlays behind modals
+ *                   Files: search.module.css
+ *
+ * z-modal (100)   - Reserved for modals and dialogs
  * ==========================================================================
  */
 

tailwind.config.js

@@ -189,6 +189,7 @@ module.exports = {
         sidebar: "20", // Sidebar, refcards, lightbox close button
         header: "30", // Header, lightbox overlay, chat sticky
         dropdown: "50", // Version selector, tooltips, dropdown menus
+        overlay: "90", // Full-screen overlays (search modal backdrop)
         modal: "100", // Modals, dialogs (reserved for future use)
       },