Enter key on the input without a selection should trigger form onSubmit or have a callback prop

[hughlomas]

First off, thanks for this simple and focused component, it is what I was looking for and has a clean API.

It would be nice if Enter in the input would actually submit something, since it would be parity with normal form behavior. Right now it does not, which after a cursory glance at the code is likely a result of the if (activeItem === undefined) { return } in handleEnterKey()

handleEnterKey() {
    const activeItem = this._getActiveItem()
    if (activeItem === undefined) { return }

    this.selectAddress(activeItem.suggestion, activeItem.placeId)
  }

I would suggest adding an onEnter callback prop that receives the first result item, and the current value of the text input, or simply trigger onSubmit with the current text or first result item.

[hibiken]

@hughlomas Thank you for this issue!

I was actually working on this exact feature a few days ago, and it's still a work in progress. Which one do you you prefer: Calling the onEnter callback with the current text or the first result item? Seems like everyone has different approach. For example, Google Maps takes the current text, and Airbnb takes the first result item.

I was thinking about adding another boolean prop eagerMode to imitate Airbnb's search input behavior, and onEnter callback simply takes the current text in the input field.

[hughlomas]

@kenny-hibino Hah, that's great to hear!

I think if onEnter receives both then the developer can decide which value to use.

If you were to implement eagerMode, what would it call when enter was pressed?

[hibiken]

I think if onEnter receives both then the developer can decide which value to use.

Great idea, I like it!

As for the eagerMode, onEnter callback will behave the same, but input field is always filled with the first item in the autocomplete.

Like this (After typing "San" I get this)

[hughlomas]

@kenny-hibino Oh I see, I do like that as an option, yes.

[hibiken]

Partially implemented with #25

[hughlomas]

Hey, just wanted to say thank you for partially implementing this. It will be ideal once the first result is also passed to onEnterKeyDown, because the current value of the input field is already generally available with this.state.address.

[made-by-chris]

I hope this isn't too far off track, but how might i run geocodeByAddress on onChange within the PlacesAutocomplete element? My application doesn't have a 'submit' button, but i cant seem to get lat/long ( or any response ) from the geocodeByAddress method unless as the result of a submit. I tried rolling the call into the onChange as users click on addresses but no dice.

[hibiken]

@basiclaser Thank you for this good question! onChange callback gets called every input change event (You probably don't want to do that).

For your use case, please provide onSelect callback. This callback takes {address, placeId}.

Example

const handleSelect = ({address, placeId}) => {
  geocodeByAddress(address, (err, {lat, lng}) => {
    if (err) {
      console.log('Error', err)
    }
    console.log('Geocode success', { lat, lng })
  })
}

<PlacesAutocomplete
  onChange={this.handleChange}
  value={this.state.address}
  onSelect={this.handleSelect}
/>

Hope this helps! If you are still having trouble, please feel free to ask me any questions here or Gitter channel :octocat:

[hibiken]

Closing this 👍

[hughlomas]

@kenny-hibino Hey kenny, are we able to get the first result also passed in to onEnterKeyDown?

[hibiken]

@hughlomas Have you tried out typeAhead feature that was released yesterday? It's enabled by default in the new major version release and it sets the value to first result when Enter Key in pressed 👍

[hughlomas]

@kenny-hibino Yes, but you state it is not available in mobile, which is precisely the environment that I am using react-places-autocomplete 😃

[hibiken]

@hughlomas I see. Let me see if we can find a good solution to that this weekend 👍

[hughlomas]

@kenny-hibino Thanks haha, it's not a showstopper or anything, just a would-be-nice feature. Thanks for being so responsive!

[sambokai]

This might help in newer versions: https://github.com/hibiken/react-places-autocomplete/issues/208#issuecomment-631474647