FIX (keyboard navigation)[issue #88]: fix tab navigation from outside…

… closes issue #88 (#90)

* FIX (keyboard navigation): fix tab navigation from outside

* CHORE (examples): cleanup basic example

* v4.4.0
See changelog: https://github.com/sanusart/react-dropdown-select/blob/master/CHANGELOG.md

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v4.4.0
+*  FIX (keyboard navigation): fix tab navigation from outside [View](https://github.com/sanusart/react-dropdown-select/commit/ebc15423f9816cf6c0259e6a4b7287f338d8b1d0)
+*  CHORE (examples): cleanup basic example [View](https://github.com/sanusart/react-dropdown-select/commit/bc9218fe96828e033818afd349e2384039fd2d8c)
+
 ### v4.3.1
 *  FIX (dropdownHandleRenderer)[#86]: fix prop warning in development, c… (#87) [View](https://github.com/sanusart/react-dropdown-select/commit/cf7a0c262ffce05d60ad3ab9f54f80941712ef98)
 

__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"
   >

docs/src/examples/Basic.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { Heading } from './components/Heading';
 import Select from '../../../src';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
@@ -27,12 +26,4 @@ const Basic = ({ options, title }) => (
   </React.Fragment>
 );
 
-Basic.propTypes = {};
-
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 export default Basic;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dropdown-select",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Customizable dropdown select for react",
   "main": "dist/react-dropdown-select.js",
   "module": "lib/index.js",

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}