Add phantom overlay to Selects to prevent background touches

https://github.com/radix-ui/primitives/issues/1658

components/CharacterGrid/index.scss

@@ -11,6 +11,7 @@
   margin: 0;
   padding: 0;
   max-width: 761px;
+  isolation: isolate;
 
   @include breakpoint(tablet) {
     justify-content: space-between;

components/JobSection/index.scss

@@ -45,6 +45,7 @@
     box-sizing: border-box;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
     display: block;
+    isolation: isolate;
     flex-grow: 2;
     flex-shrink: 0;
     height: $height;

components/Overlay/index.scss

@@ -0,0 +1,13 @@
+.Overlay {
+  isolation: isolate;
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &.Visible {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}

components/Overlay/index.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+import './index.scss'
+
+interface Props {
+  visible: boolean
+  open: boolean
+}
+
+const defaultProps = {
+  visible: true,
+}
+
+const Overlay = ({
+  visible: displayed,
+  open,
+}: {
+  visible: boolean
+  open: boolean
+}) => {
+  const [visible, setVisible] = useState(open)
+
+  const classes = classNames({
+    Overlay: true,
+    Visible: displayed,
+  })
+
+  useEffect(() => {
+    if (!open) {
+      console.log('No longer open, setting timeout...')
+      const timer = setTimeout(() => {
+        console.log('Timeout cleared!')
+        setVisible(false)
+      }, 200)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+    setVisible(true)
+    return () => {}
+  }, [open])
+
+  function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    event.stopPropagation()
+  }
+
+  return visible ? <div className={classes} onClick={handleClick} /> : null
+}
+
+Overlay.defaultProps = defaultProps
+
+export default Overlay

components/Select/index.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import ArrowIcon from '~public/icons/Arrow.svg'
 
 import './index.scss'
+import Overlay from '~components/Overlay'
 
 // Props
 interface Props
@@ -76,19 +77,24 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
       </RadixSelect.Trigger>
 
       <RadixSelect.Portal className="Select">
-        <RadixSelect.Content
+        <>
-          onCloseAutoFocus={onCloseAutoFocus}
+          <Overlay open={open} visible={false} />
-          onEscapeKeyDown={onEscapeKeyDown}
+
-          onPointerDownOutside={onPointerDownOutside}
+          <RadixSelect.Content
-        >
+            className="Select"
-          <RadixSelect.ScrollUpButton className="Scroll Up">
+            onCloseAutoFocus={onCloseAutoFocus}
-            <ArrowIcon />
+            onEscapeKeyDown={onEscapeKeyDown}
-          </RadixSelect.ScrollUpButton>
+            onPointerDownOutside={onPointerDownOutside}
-          <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
+          >
-          <RadixSelect.ScrollDownButton className="Scroll Down">
+            <RadixSelect.ScrollUpButton className="Scroll Up">
-            <ArrowIcon />
+              <ArrowIcon />
-          </RadixSelect.ScrollDownButton>
+            </RadixSelect.ScrollUpButton>
-        </RadixSelect.Content>
+            <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
+            <RadixSelect.ScrollDownButton className="Scroll Down">
+              <ArrowIcon />
+            </RadixSelect.ScrollDownButton>
+          </RadixSelect.Content>
+        </>
       </RadixSelect.Portal>
     </RadixSelect.Root>
   )

styles/globals.scss

@@ -119,16 +119,6 @@ select {
   }
 }
 
-.Overlay {
-  background: rgba(0, 0, 0, 0.6);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 20;
-}
-
 .Hovercard {
   background: #222;
   border-radius: $unit;