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

@@ -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>

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,

components/JobSkillSearchFilterBar/index.tsx

@@ -44,6 +44,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
         value={-1}
         triggerClass="Bound"
         open={open}
+        overlayVisible={false}
         onValueChange={onChange}
         onOpenChange={openSelect}
       >

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);
   }
 }

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

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>

components/SelectWithInput/index.tsx

@@ -173,6 +173,7 @@ const SelectWithInput = ({
           onOpenChange={changeOpen}
           onClose={onClose}
           triggerClass="modal"
+          overlayVisible={false}
         >
           {generateOptions()}
         </Select>

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()}