fix: hydration problem caused by isAppleDevice

JedWatson · Feb 6, 2024 · 35de3a1 · 35de3a1
1 parent 06e3488
commit 35de3a1
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -339,6 +339,7 @@ interface State<
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
   instancePrefix: string;
+  isAppleDevice: boolean;
 }
 
 interface CategorizedOption<Option> {
@@ -643,6 +644,7 @@ export default class Select<
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
     instancePrefix: '',
+    isAppleDevice: false,
   };
 
   // Misc. Instance Properties
@@ -656,7 +658,6 @@ export default class Select<
   openAfterFocus = false;
   scrollToFocusedOptionOnUpdate = false;
   userIsDragging?: boolean;
-  isAppleDevice = isAppleDevice();
 
   // Refs
   // ------------------------------
@@ -814,6 +815,10 @@ export default class Select<
     ) {
       scrollIntoView(this.menuListRef, this.focusedOptionRef);
     }
+    if (isAppleDevice()) {
+      // eslint-disable-next-line react/no-did-mount-set-state
+      this.setState({ isAppleDevice: true });
+    }
   }
   componentDidUpdate(prevProps: Props<Option, IsMulti, Group>) {
     const { isDisabled, menuIsOpen } = this.props;
@@ -1721,7 +1726,7 @@ export default class Select<
       'aria-labelledby': this.props['aria-labelledby'],
       'aria-required': required,
       role: 'combobox',
-      'aria-activedescendant': this.isAppleDevice
+      'aria-activedescendant': this.state.isAppleDevice
         ? undefined
         : this.state.focusedOptionId || '',
 
@@ -1992,7 +1997,7 @@ export default class Select<
         onMouseOver: onHover,
         tabIndex: -1,
         role: 'option',
-        'aria-selected': this.isAppleDevice ? undefined : isSelected, // is not supported on Apple devices
+        'aria-selected': this.state.isAppleDevice ? undefined : isSelected, // is not supported on Apple devices
       };
 
       return (
@@ -2185,7 +2190,7 @@ export default class Select<
         isFocused={isFocused}
         selectValue={selectValue}
         focusableOptions={focusableOptions}
-        isAppleDevice={this.isAppleDevice}
+        isAppleDevice={this.state.isAppleDevice}
       />
     );
   }