Merge branch 'master' into bugfix-menuShouldBlockScroll-prop

Author: robxbob

packages/react-select/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-select
 
+## 5.10.2
+
+### Patch Changes
+
+- [`bf0c8615`](https://github.com/JedWatson/react-select/commit/bf0c8615f8574264883f984c0d2ff36ff9dcdcb7) [#6051](https://github.com/JedWatson/react-select/pull/6051) Thanks [@jnyholm-sc](https://github.com/jnyholm-sc)! - fix: hydration problem caused by isAppleDevice
+
 ## 5.10.1
 
 ### Patch Changes

packages/react-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.10.1",
+  "version": "5.10.2",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

packages/react-select/src/Select.tsx

@@ -340,6 +340,7 @@ interface State<
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
   instancePrefix: string;
+  isAppleDevice: boolean;
 }
 
 interface CategorizedOption<Option> {
@@ -644,6 +645,7 @@ export default class Select<
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
     instancePrefix: '',
+    isAppleDevice: false,
   };
 
   // Misc. Instance Properties
@@ -657,7 +659,6 @@ export default class Select<
   openAfterFocus = false;
   scrollToFocusedOptionOnUpdate = false;
   userIsDragging?: boolean;
-  isAppleDevice = isAppleDevice();
 
   // Refs
   // ------------------------------
@@ -815,6 +816,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;
@@ -1724,7 +1729,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 || '',
 
@@ -1995,7 +2000,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 (
@@ -2188,7 +2193,7 @@ export default class Select<
         isFocused={isFocused}
         selectValue={selectValue}
         focusableOptions={focusableOptions}
-        isAppleDevice={this.isAppleDevice}
+        isAppleDevice={this.state.isAppleDevice}
       />
     );
   }