Pressing tab doesn't do anything

[Daniel15]

When the dropdown is open, pressing tab just closes it without doing anything. With most other autocompletion components I've used, tab selects the currently active option, then moves to the next input field in the form.

Examples where pressing tab behaves this way:

• https://jedwatson.github.io/react-select/
• http://react-autosuggest.js.org/
• https://harvesthq.github.io/chosen/
• https://jqueryui.com/autocomplete/
• http://easyautocomplete.com/

[Daniel15]

I think it'd be great to expose a prop such as selectOnTab which would allow Tab to extend or act in a similar fashion to how the Enter keydown handler currently functions.

That's exactly what I did in #186. However it's nearly a year old. I'm not going to spend time rebasing it if it's never going to be merged. I'm just using my own fork of the component instead.

[stern-shawn]

@Daniel15 Yup, I noticed your PR just after posting my hasty initial reply and felt silly for missing it.

I think I will need to go down a similar route; do you mind if I replicate some of the changes you made in my own fork, but with some changes to support React 16? (I tried using it locally and got errors related to React.PropTypes being deprecated now)

[Daniel15]

Sure, go ahead. You can likely fork my fork, and then do the updates there 😄

[mellis481]

@DanBuild @stern-shawn I'm not sure which of your selectOnTab PRs is currently in the version of react-autocomplete I'm using (1.8.1), but it appears to only work if I also have selectOnBlur: true.

[stern-shawn]

@mellis481 My PR was developed against 1.8.1 and has been being used in production by my product since April with selectOnBlur definitely not set (defaults to false). It hasn't been merged into this repo yet though (or much of anything lately) so if you want to actually make use of selectOnTab you'll need to pull down my fork or point to my repo in your package.json instead of ^1.8.1 or however it's currently set up in your project 😄

"react-autocomplete": "github:stern-shawn/react-autocomplete",

selectOnBlur acts similar since technically tabbing away from an element is a blur event, but users were not happy with fields being automatically selected by other blur events like clicking on another form field, hitting esc, etc. I made my own PR because I strictly wanted click, enter, and tab as the ways to select an item. selectOnBlur was simply too loose for my use case.

[mellis481]

I was able to write some code that gets select on tab working against the master branch. First, I have a component state object that stores the current value of the autocomplete field which is updated in onChange. Also, the items for my <Autocomplete /> instance are passed in as props to my wrapper component.

Next I added a private variable to my wrapper component:

private typeaheadInput: Autocomplete | null = null;

This is set by adding the following to the <Autocomplete /> instance:

ref={(instance: Autocomplete | null) => (this.typeaheadInput = instance)}

Then I add a onKeyDown event to inputProps like this:

inputProps={{ onBlur: blur, onKeyDown: keyDown }}

My keyDown functions look like this:

const keyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 if (e.key === 'Tab') {
 const { highlightedIndex } = this.typeaheadInput!.state;
 if (highlightedIndex != null) {
 const fieldValue = items[highlightedIndex]; // If a shouldItemRender props is defined, custom logic to filter items will be needed
 this.setState({ value: getItemValue(fieldValue) });
 }
 }
};

Basically what this code will do is when Tab is pressed, it will find the item you highlighted and update the state value prop. Then the field will blur.