From 35de3a1f34f10fefdd4a1a2c85a2f1a651091a0a Mon Sep 17 00:00:00 2001
From: Zhou Hua <zhou--hua@163.com>
Date: Tue, 6 Feb 2024 09:57:59 +0000
Subject: [PATCH] fix: hydration problem caused by isAppleDevice

---
 packages/react-select/src/Select.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 798f6126b2..7bc41b7abe 100644
--- 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}
       />
     );
   }