Treat Tab key same as Enter for select purposes

[Richtermeister]

First off - thank you so much for this project, it works like a charm and saved me a bunch of time.

I have one suggestion: I'm using this auto-complete as part of a larger form, and my users are used to tabbing from field to field, however this does not trigger the onSelect handler. Do you see any issues triggering the same behavior that the Enter key triggers from the Tab key as well (without suppressing default, so that the form field is indeed advanced)?

Thank you for consideration.

[timmyers]

For anyone waiting on this, feel free to use this fork in the meantime. https://www.npmjs.com/package/@closetbox/react-places-autocomplete

[MikeShobe]

Any chance of implementing this? Having Tab do the same as Enter?

[Richtermeister]

As a quick workaround I just extended things in my project:

class MyPlacesAutocomplete extends PlacesAutocomplete {
    handleInputKeyDown(event) {
        if (event.key == 'Tab') {
            this.handleEnterKey()
        }
        super.handleInputKeyDown(event)
    }
}

[jasan-s]

@Richtermeister it doesnt seem to work for me. I get the error: TypeError: Cannot read property 'call' of undefined. I had to do the following:

class CustomPlacesAutocomplete extends PlacesAutocomplete {
  handleInputKeyDown = event => {
    switch (event.key) {
      case 'Enter':
        event.preventDefault()
        this.handleEnterKey()
        break
      case 'ArrowDown':
        event.preventDefault() // prevent the cursor from moving
        this.handleDownKey()
        break
      case 'ArrowUp':
        event.preventDefault() // prevent the cursor from moving
        this.handleUpKey()
        break
      case 'Escape':
        this.clearSuggestions()
        break
      case 'Tab':
        event.preventDefault()
        this.handleEnterKey()
        break
    }
  }
}

[jasan-s]

@hibiken would love to see this merged :)

[javidjamae]

@jasan-s Thanks for this!

I was testing your solution out and ran across two issues:

1. Because the Tab case does an event.preventDefault() it is not going to actually tab into the next field, it will just stay on the current field. Our expected behavior was to select the highlighted value and then tab to the next field. We just removed the event.preventDefault() call.

2. After a value is selected, subsequently pressing tab will continue acting as an enter action and will therefore keep trying to call handleSelect. We added a check for whether there is an active suggestion to avoid this situation.

      case 'Tab':
        if ( this.getActiveSuggestion() ) {
          this.handleEnterKey()
        }
        break

[sambokai]

Still interested in pursuing this? There seems to be demand judging by the upvotes and I would be willing to review and if adequate, merge this together with Ken, the project owner.

[hibiken]

LGTM, let's resolve the conflict and merge this 👍