Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Pressing tab doesn't do anything #182

Open
Daniel15 opened this issue Nov 27, 2016 · 6 comments
Open

Pressing tab doesn't do anything #182

Daniel15 opened this issue Nov 27, 2016 · 6 comments

Comments

@Daniel15
Copy link
Member

Daniel15 commented Nov 27, 2016

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:

@Daniel15
Copy link
Member Author

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
Copy link

@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
Copy link
Member Author

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

@mellis481
Copy link

@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
Copy link

stern-shawn commented Aug 22, 2018

@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
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants