FIX (keyboard navigation): fix tab navigation from outside

sanusart · Apr 29, 2020 · ebc1542 · ebc1542
1 parent 873a66e
commit ebc1542
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
@@ -97,7 +97,6 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
     direction="ltr"
     disabled={true}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="-1"
   >
@@ -237,7 +236,6 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
     direction="ltr"
     disabled={false}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="0"
   >
@@ -391,7 +389,6 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
     direction="ltr"
     disabled={false}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="0"
   >
@@ -560,7 +557,6 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
     direction="ltr"
     disabled={false}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="0"
   >
@@ -704,7 +700,6 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
     direction="ltr"
     disabled={false}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="0"
   >
@@ -865,7 +860,6 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
     direction="ltr"
     disabled={false}
     onClick={[Function]}
-    onFocus={[Function]}
     onKeyDown={[Function]}
     tabIndex="0"
   >

diff --git a/src/index.js b/src/index.js
@@ -400,13 +400,21 @@ export class Select extends Component {
     const tab = event.key === 'Tab' && !event.shiftKey;
     const shiftTab = event.shiftKey && event.key === 'Tab';
 
-    if ((arrowDown || tab) && cursor === null) {
+    if (arrowDown && !state.dropdown) {
+      event.preventDefault();
+      this.dropDown('open');
+      return setState({
+        cursor: 0
+      });
+    }
+
+    if ((arrowDown || (tab && state.dropdown)) && cursor === null) {
       return setState({
         cursor: 0
       });
     }
 
-    if (arrowUp || arrowDown || shiftTab || tab) {
+    if (arrowUp || arrowDown || (shiftTab && state.dropdown) || (tab && state.dropdown)) {
       event.preventDefault();
     }
 
@@ -425,25 +433,25 @@ export class Select extends Component {
       }
     }
 
-    if ((arrowDown || tab) && methods.searchResults().length === cursor) {
+    if ((arrowDown || (tab && state.dropdown)) && methods.searchResults().length === cursor) {
       return setState({
         cursor: 0
       });
     }
 
-    if (arrowDown || tab) {
+    if (arrowDown || (tab && state.dropdown)) {
       setState((prevState) => ({
         cursor: prevState.cursor + 1
       }));
     }
 
-    if ((arrowUp || shiftTab) && cursor > 0) {
+    if ((arrowUp || (shiftTab && state.dropdown)) && cursor > 0) {
       setState((prevState) => ({
         cursor: prevState.cursor - 1
       }));
     }
 
-    if ((arrowUp || shiftTab) && cursor === 0) {
+    if ((arrowUp || (shiftTab && state.dropdown)) && cursor === 0) {
       setState({
         cursor: methods.searchResults().length
       });
@@ -483,7 +491,6 @@ export class Select extends Component {
         <ReactDropdownSelect
           onKeyDown={this.handleKeyDown}
           onClick={(event) => this.dropDown('open', event)}
-          onFocus={(event) => this.dropDown('open', event)}
           tabIndex={this.props.disabled ? '-1' : '0'}
           direction={this.props.direction}
           style={this.props.style}