diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap index 89643972..7267a833 100644 --- a/__tests__/__snapshots__/index.spec.js.snap +++ b/__tests__/__snapshots__/index.spec.js.snap @@ -97,7 +97,6 @@ exports[` is disabled 1`] = ` direction="ltr" disabled={true} onClick={[Function]} - onFocus={[Function]} onKeyDown={[Function]} tabIndex="-1" > @@ -237,7 +236,6 @@ exports[` renders correctly 1`] = ` direction="ltr" disabled={false} onClick={[Function]} - onFocus={[Function]} onKeyDown={[Function]} tabIndex="0" > @@ -391,7 +389,6 @@ exports[` renders with clearable 1`] = ` direction="ltr" disabled={false} onClick={[Function]} - onFocus={[Function]} onKeyDown={[Function]} tabIndex="0" > @@ -560,7 +557,6 @@ exports[` renders with loading 1`] = ` direction="ltr" disabled={false} onClick={[Function]} - onFocus={[Function]} onKeyDown={[Function]} tabIndex="0" > @@ -704,7 +700,6 @@ exports[` renders with name 1`] = ` direction="ltr" disabled={false} onClick={[Function]} - onFocus={[Function]} onKeyDown={[Function]} tabIndex="0" > @@ -865,7 +860,6 @@ exports[` 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 index 1e698672..987e6c0d 100644 --- 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 { this.dropDown('open', event)} - onFocus={(event) => this.dropDown('open', event)} tabIndex={this.props.disabled ? '-1' : '0'} direction={this.props.direction} style={this.props.style}