diff --git a/.changeset/lemon-deers-taste.md b/.changeset/lemon-deers-taste.md new file mode 100644 index 0000000000..30b9ac6404 --- /dev/null +++ b/.changeset/lemon-deers-taste.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Add aria-disabled to select's control component. diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json index 9c6ecbdaba..da975f7e1c 100644 --- a/cypress/fixtures/selectors.json +++ b/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", diff --git a/cypress/integration/single-select.spec.ts b/cypress/integration/single-select.spec.ts index d4700dc154..2e7effeca5 100644 --- a/cypress/integration/single-select.spec.ts +++ b/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}`, () => { diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md index 8dabac9e04..c1df62f11c 100644 --- a/packages/react-select/CHANGELOG.md +++ b/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 diff --git a/packages/react-select/package.json b/packages/react-select/package.json index 8e05e4019e..6a52557e6f 100644 --- a/packages/react-select/package.json +++ b/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", diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx index d8e85c3db0..882390f9a4 100644 --- a/packages/react-select/src/components/Control.tsx +++ b/packages/react-select/src/components/Control.tsx @@ -87,6 +87,7 @@ const Control = < 'control--menu-is-open': menuIsOpen, })} {...innerProps} + aria-disabled={isDisabled || undefined} > {children} diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx index d5cc0a79ad..7483fa045e 100644 --- a/packages/react-select/src/components/Menu.tsx +++ b/packages/react-select/src/components/Menu.tsx @@ -498,49 +498,53 @@ export const NoOptionsMessage = < Option, IsMulti extends boolean, Group extends GroupBase ->( - props: NoticeProps -) => { - const { children, innerProps } = props; +>({ + children = 'No options', + innerProps, + ...restProps +}: NoticeProps) => { return ( {children} ); }; -NoOptionsMessage.defaultProps = { - children: 'No options', -}; export const LoadingMessage = < Option, IsMulti extends boolean, Group extends GroupBase ->( - props: NoticeProps -) => { - const { children, innerProps } = props; +>({ + children = 'Loading...', + innerProps, + ...restProps +}: NoticeProps) => { return ( {children} ); }; -LoadingMessage.defaultProps = { - children: 'Loading...', -}; // ============================== // Menu Portal diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx index 052cc13c90..51a2ecec28 100644 --- a/packages/react-select/src/components/indicators.tsx +++ b/packages/react-select/src/components/indicators.tsx @@ -287,17 +287,22 @@ export const LoadingIndicator = < Option, IsMulti extends boolean, Group extends GroupBase ->( - props: LoadingIndicatorProps -) => { - const { innerProps, isRtl } = props; - +>({ + innerProps, + isRtl, + size = 4, + ...restProps +}: LoadingIndicatorProps) => { return ( @@ -306,4 +311,3 @@ export const LoadingIndicator = < ); }; -LoadingIndicator.defaultProps = { size: 4 }; diff --git a/packages/react-select/src/internal/ScrollManager.tsx b/packages/react-select/src/internal/ScrollManager.tsx index 802ab1e76f..4e1440008f 100644 --- a/packages/react-select/src/internal/ScrollManager.tsx +++ b/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) => { + const element = event.target as HTMLDivElement; + return ( + element.ownerDocument.activeElement && + (element.ownerDocument.activeElement as HTMLElement).blur() + ); +}; export default function ScrollManager({ children, diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index 6452d6564e..03b8bd9f59 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/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(); };