From ff3b6af7af59b76a5d370a787589e98b7d853580 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 21:49:58 -0800
Subject: [PATCH] Fix double overlay on selects in modals

Selects now take an optional property `overlayVisible` that if false, doesn't render visual elements of its overlay.
---
 components/AxSelect/index.tsx                |  2 ++
 components/ExtendedMasterySelect/index.tsx   |  2 ++
 components/JobSkillSearchFilterBar/index.tsx |  1 +
 components/Overlay/index.scss                |  6 +++---
 components/Select/index.tsx                  | 10 +++++++++-
 components/SelectTableField/index.tsx        |  1 +
 components/SelectWithInput/index.tsx         |  1 +
 components/WeaponKeySelect/index.tsx         |  1 +
 8 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/AxSelect/index.tsx b/components/AxSelect/index.tsx
index 50ef3156..99ab9c7e 100644
--- a/components/AxSelect/index.tsx
+++ b/components/AxSelect/index.tsx
@@ -410,6 +410,7 @@ const AXSelect = (props: Props) => {
             onOpenChange={() => openSelect(1)}
             onValueChange={handleAX1SelectChange}
             triggerClass="modal"
+            overlayVisible={false}
           >
             {generateOptions(0)}
           </Select>
@@ -439,6 +440,7 @@ const AXSelect = (props: Props) => {
             onValueChange={handleAX2SelectChange}
             triggerClass="modal"
             ref={secondaryAxModifierSelect}
+            overlayVisible={false}
           >
             {generateOptions(1)}
           </Select>
diff --git a/components/ExtendedMasterySelect/index.tsx b/components/ExtendedMasterySelect/index.tsx
index ff9cc218..ae97d9ae 100644
--- a/components/ExtendedMasterySelect/index.tsx
+++ b/components/ExtendedMasterySelect/index.tsx
@@ -135,6 +135,7 @@ const ExtendedMasterySelect = ({
         onOpenChange={() => changeOpen('left')}
         onClose={onClose}
         triggerClass="Left modal"
+        overlayVisible={false}
       >
         {generateLeftOptions()}
       </Select>
@@ -146,6 +147,7 @@ const ExtendedMasterySelect = ({
         onValueChange={handleRightSelectChange}
         onOpenChange={() => changeOpen('right')}
         onClose={onClose}
+        overlayVisible={false}
         triggerClass={classNames({
           Right: true,
           modal: true,
diff --git a/components/JobSkillSearchFilterBar/index.tsx b/components/JobSkillSearchFilterBar/index.tsx
index 7370818f..7eadbc2b 100644
--- a/components/JobSkillSearchFilterBar/index.tsx
+++ b/components/JobSkillSearchFilterBar/index.tsx
@@ -44,6 +44,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
         value={-1}
         triggerClass="Bound"
         open={open}
+        overlayVisible={false}
         onValueChange={onChange}
         onOpenChange={openSelect}
       >
diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss
index b94ff228..34d953a6 100644
--- a/components/Overlay/index.scss
+++ b/components/Overlay/index.scss
@@ -6,9 +6,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
-  animation: 0.24s ease-in fadeInFilter;
-  animation-fill-mode: forwards;
 
   &.Job {
     animation: none;
@@ -16,6 +13,9 @@
   }
 
   &.Visible {
+    animation: 0.24s ease-in fadeInFilter;
+    animation-fill-mode: forwards;
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
     background: rgba(0, 0, 0, 0.6);
   }
 }
diff --git a/components/Select/index.tsx b/components/Select/index.tsx
index 484ac4ab..b1a6bcb9 100644
--- a/components/Select/index.tsx
+++ b/components/Select/index.tsx
@@ -23,6 +23,7 @@ interface Props
   onValueChange?: (value: string) => void
   onClose?: () => void
   triggerClass?: string
+  overlayVisible?: boolean
 }
 
 const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
@@ -94,7 +95,10 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
 
       <RadixSelect.Portal className="Select">
         <>
-          <Overlay open={open} visible={false} />
+          <Overlay
+            open={open}
+            visible={props.overlayVisible != null ? props.overlayVisible : true}
+          />
 
           <RadixSelect.Content
             className="Select"
@@ -116,4 +120,8 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
   )
 })
 
+Select.defaultProps = {
+  overlayVisible: true,
+}
+
 export default Select
diff --git a/components/SelectTableField/index.tsx b/components/SelectTableField/index.tsx
index cea99ce7..e64ea238 100644
--- a/components/SelectTableField/index.tsx
+++ b/components/SelectTableField/index.tsx
@@ -59,6 +59,7 @@ const SelectTableField = (props: Props) => {
           onClose={props.onClose}
           triggerClass={classNames({ Bound: true, Table: true })}
           value={value}
+          overlayVisible={false}
         >
           {props.children}
         </Select>
diff --git a/components/SelectWithInput/index.tsx b/components/SelectWithInput/index.tsx
index 7c88dfc6..966db681 100644
--- a/components/SelectWithInput/index.tsx
+++ b/components/SelectWithInput/index.tsx
@@ -173,6 +173,7 @@ const SelectWithInput = ({
           onOpenChange={changeOpen}
           onClose={onClose}
           triggerClass="modal"
+          overlayVisible={false}
         >
           {generateOptions()}
         </Select>
diff --git a/components/WeaponKeySelect/index.tsx b/components/WeaponKeySelect/index.tsx
index a11c1474..fac77fe8 100644
--- a/components/WeaponKeySelect/index.tsx
+++ b/components/WeaponKeySelect/index.tsx
@@ -130,6 +130,7 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
         onValueChange={handleChange}
         ref={ref}
         triggerClass="modal"
+        overlayVisible={false}
       >
         <SelectItem key="no-key" value="no-key">
           {emptyOption()}