add aria-disabled and test

.changeset/lemon-deers-taste.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Add aria-disabled to select's control component.

cypress/fixtures/selectors.json

@@ -10,6 +10,7 @@
   "indicatorClear": ".react-select__clear-indicator",
   "indicatorDropdown": ".react-select__dropdown-indicator",
   "menu": ".react-select__menu",
+  "control": ".react-select__control",
   "menuOption": ".react-select__option",
   "noOptionsValue": ".react-select__menu-notice--no-options",
   "placeholder": ".react-select__placeholder",

cypress/integration/single-select.spec.ts

@@ -107,7 +107,11 @@ describe('Single Select', () => {
           .click({ force: true })
           .find('input')
           .should('exist')
-          .should('be.disabled');
+          .should('be.disabled')
+          // control should have aria-disabled
+          .get(selector.singleBasicSelect)
+          .find(selector.control)
+          .should('have.attr', 'aria-disabled', 'true');
       });
 
       it(`Should filter options when searching in view: ${viewport}`, () => {

packages/react-select/CHANGELOG.md

@@ -1,5 +1,23 @@
 # react-select
 
+## 5.7.6
+
+### Patch Changes
+
+- [`f6315cd5`](https://github.com/JedWatson/react-select/commit/f6315cd5feddb2e9ea168bcad391b29990b53afb) [#5672](https://github.com/JedWatson/react-select/pull/5672) Thanks [@tu4mo](https://github.com/tu4mo)! - Fix for calling non-cancellable scroll events
+
+## 5.7.5
+
+### Patch Changes
+
+- [`9d1730ba`](https://github.com/JedWatson/react-select/commit/9d1730ba4f97a51d25c7e704acd1a4c2be8f7182) [#5347](https://github.com/JedWatson/react-select/pull/5347) Thanks [@aszmyd](https://github.com/aszmyd)! - Make scroll lock div work on a document context it belongs to
+
+## 5.7.4
+
+### Patch Changes
+
+- [`16414bb5`](https://github.com/JedWatson/react-select/commit/16414bb53295b362690d2b089d74182ddeabc1dd) [#5689](https://github.com/JedWatson/react-select/pull/5689) Thanks [@Rall3n](https://github.com/Rall3n)! - Resolve `defaultProps` deprecation warning for React v18+.
+
 ## 5.7.3
 
 ### Patch Changes

packages/react-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.3",
+  "version": "5.7.6",
   "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/components/Control.tsx

@@ -87,6 +87,7 @@ const Control = <
         'control--menu-is-open': menuIsOpen,
       })}
       {...innerProps}
+      aria-disabled={isDisabled || undefined}
     >
       {children}
     </div>

packages/react-select/src/components/Menu.tsx

@@ -498,49 +498,53 @@ export const NoOptionsMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'No options',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'noOptionsMessage', {
-        'menu-notice': true,
-        'menu-notice--no-options': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'noOptionsMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--no-options': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-NoOptionsMessage.defaultProps = {
-  children: 'No options',
-};
 
 export const LoadingMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'Loading...',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingMessage', {
-        'menu-notice': true,
-        'menu-notice--loading': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'loadingMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--loading': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-LoadingMessage.defaultProps = {
-  children: 'Loading...',
-};
 
 // ==============================
 // Menu Portal

packages/react-select/src/components/indicators.tsx

@@ -287,17 +287,22 @@ export const LoadingIndicator = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: LoadingIndicatorProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, isRtl } = props;
-
+>({
+  innerProps,
+  isRtl,
+  size = 4,
+  ...restProps
+}: LoadingIndicatorProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingIndicator', {
-        indicator: true,
-        'loading-indicator': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, innerProps, isRtl, size },
+        'loadingIndicator',
+        {
+          indicator: true,
+          'loading-indicator': true,
+        }
+      )}
       {...innerProps}
     >
       <LoadingDot delay={0} offset={isRtl} />
@@ -306,4 +311,3 @@ export const LoadingIndicator = <
     </div>
   );
 };
-LoadingIndicator.defaultProps = { size: 4 };

packages/react-select/src/internal/ScrollManager.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { Fragment, ReactElement, RefCallback } from 'react';
+import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
 import useScrollCapture from './useScrollCapture';
 import useScrollLock from './useScrollLock';
 
@@ -14,8 +14,13 @@ interface Props {
   readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
 }
 
-const blurSelectInput = () =>
-  document.activeElement && (document.activeElement as HTMLElement).blur();
+const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {
+  const element = event.target as HTMLDivElement;
+  return (
+    element.ownerDocument.activeElement &&
+    (element.ownerDocument.activeElement as HTMLElement).blur()
+  );
+};
 
 export default function ScrollManager({
   children,

packages/react-select/src/internal/useScrollCapture.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { supportsPassiveEvents } from '../utils';
 
 const cancelScroll = (event: WheelEvent | TouchEvent) => {
-  event.preventDefault();
+  if (event.cancelable) event.preventDefault();
   event.stopPropagation();
 };