Merge branch 'master' into #3006-Documentation-Additions-and-Revisions

JedWatson · Jan 13, 2021 · 9c4dec3 · 9c4dec3
2 parents 17680f6 + ef2d357
commit 9c4dec3
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/.changeset/pink-cats-mate.md b/.changeset/pink-cats-mate.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Fixed value passed to onChange when clearing value
diff --git a/.changeset/quick-carrots-count.md b/.changeset/quick-carrots-count.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Base aria-live message on tabSelectsValue prop
diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js
@@ -443,6 +443,11 @@ export default class Select extends Component<Props, State> {
       this.focusInput();
     }
 
+    if (isFocused && isDisabled && !prevProps.isDisabled) {
+      // ensure select state gets blurred in case Select is programatically disabled while focused
+      this.setState({ isFocused: false }, this.onMenuClose);
+    }
+
     // scroll the focused option into view if necessary
     if (
       this.menuListRef &&
@@ -501,7 +506,7 @@ export default class Select extends Component<Props, State> {
   openMenu(focusOption: 'first' | 'last') {
     const { selectValue, isFocused } = this.state;
     const menuOptions = this.buildMenuOptions(this.props, selectValue);
-    const { isMulti } = this.props;
+    const { isMulti, tabSelectsValue } = this.props;
     let openAtIndex =
       focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;
 
@@ -524,7 +529,10 @@ export default class Select extends Component<Props, State> {
       },
       () => {
         this.onMenuOpen();
-        this.announceAriaLiveContext({ event: 'menu' });
+        this.announceAriaLiveContext({
+          event: 'menu',
+          context: { tabSelectsValue },
+        });
       }
     );
   }
@@ -582,7 +590,7 @@ export default class Select extends Component<Props, State> {
   }
 
   focusOption(direction: FocusDirection = 'first') {
-    const { pageSize } = this.props;
+    const { pageSize, tabSelectsValue } = this.props;
     const { focusedOption, menuOptions } = this.state;
     const options = menuOptions.focusable;
 
@@ -591,7 +599,10 @@ export default class Select extends Component<Props, State> {
     let focusedIndex = options.indexOf(focusedOption);
     if (!focusedOption) {
       focusedIndex = -1;
-      this.announceAriaLiveContext({ event: 'menu' });
+      this.announceAriaLiveContext({
+        event: 'menu',
+        context: { tabSelectsValue },
+      });
     }
 
     if (direction === 'up') {
@@ -614,7 +625,10 @@ export default class Select extends Component<Props, State> {
     });
     this.announceAriaLiveContext({
       event: 'menu',
-      context: { isDisabled: isOptionDisabled(options[nextFocus]) },
+      context: {
+        isDisabled: isOptionDisabled(options[nextFocus]),
+        tabSelectsValue,
+      },
     });
   }
   onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
@@ -706,8 +720,7 @@ export default class Select extends Component<Props, State> {
     this.focusInput();
   };
   clearValue = () => {
-    const { isMulti } = this.props;
-    this.onChange(isMulti ? [] : null, { action: 'clear' });
+    this.onChange(null, { action: 'clear' });
   };
   popValue = () => {
     const { selectValue } = this.state;
@@ -1715,6 +1728,7 @@ export default class Select extends Component<Props, State> {
               Heading={GroupHeading}
               headingProps={{
                 id: headingId,
+                data: item.data,
               }}
               label={this.formatGroupLabel(item.data)}
             >

diff --git a/packages/react-select/src/__tests__/Select.test.js b/packages/react-select/src/__tests__/Select.test.js
@@ -2305,7 +2305,7 @@ test('clear select by clicking on clear button > should not call onMenuOpen', ()
     container.querySelector('.react-select__clear-indicator'),
     { button: 0 }
   );
-  expect(onChangeSpy).toBeCalledWith([], {
+  expect(onChangeSpy).toBeCalledWith(null, {
     action: 'clear',
     name: BASIC_PROPS.name,
   });

diff --git a/packages/react-select/src/accessibility/index.js b/packages/react-select/src/accessibility/index.js
@@ -7,19 +7,24 @@ export type InstructionsContext = {
   isMulti?: boolean,
   label?: string,
   isDisabled?: boolean,
+  tabSelectsValue?: boolean,
 };
 export type ValueEventContext = { value: string, isDisabled?: boolean };
 
 export const instructionsAriaMessage = (
   event: string,
   context?: InstructionsContext = {}
 ) => {
-  const { isSearchable, isMulti, label, isDisabled } = context;
+  const { isSearchable, isMulti, label, isDisabled, tabSelectsValue } = context;
   switch (event) {
     case 'menu':
       return `Use Up and Down to choose options${
         isDisabled ? '' : ', press Enter to select the currently focused option'
-      }, press Escape to exit the menu, press Tab to select the option and exit the menu.`;
+      }, press Escape to exit the menu${
+        tabSelectsValue
+          ? ', press Tab to select the option and exit the menu'
+          : ''
+      }.`;
     case 'input':
       return `${label ? label : 'Select'} is focused ${
         isSearchable ? ',type to refine list' : ''