Possible to have a callback if no autocomplete item is selected?

[ericluwj]

I am facing an issue whereby I would like to clear the value if no autocomplete item was selected.
The exact scenario is whereby I had typed in an address and then moved to the next field by pressing "Tab" without selecting any autocomplete item.
In order to invalidate the input field, I would want to clear the filled in address.

[hibiken]

Would this work for your use case?

// In `constructor`
this.state = {
  address: '',
  isAddressValid: false,
}
this.handleChange = (address) => this.setState({ address })
this.handleSelect = ({ placeId}) => this.setState({ isAddressValid: !!placeId })
this.handleBlur = () => {
  if (!this.state.isAddressValid) {
    this.setState({ address: '' })
  }
}


// And in `render`
const inputProps = {
  onChange: this.handleChange,
  value: this.state.address,
  onBlur: this.handleBlur,
}

<PlacesAutocomplete
  inputProps={inputProps}
  onSelect={this.handleSelect}
/>

[ericluwj]

Oh this seems to work. Thanks a lot.

[ahmadalfy]

This doesn't seem to work anymore. The blur event is never fired

[jjolley]

The blur event doesn't fire for me either.

[georgefeast]

Any update on this? Would be great to be able to handle blur for the input

[javidjamae]

If you pass the onBlur into the getInputProps it works:

      <PlacesAutocomplete
        ...
      >
          { ( { getInputProps, suggestions, getSuggestionItemProps, loading } ) => (
            <div>
              <input
                { ...getInputProps( { onBlur: this.handleBlur  } ) }
            />
           ...

[hibiken]

Thanks @javidjamae for posting this 👍
We made a big change in API when we went from v6 to v7.
Please refer to @javidjamae 's snippet and ignore my snippet from 2017 (unless you're using v6 or below).

[ryanconnaughton]

If you pass the onBlur into the getInputProps it works:

      <PlacesAutocomplete
        ...
      >
          { ( { getInputProps, suggestions, getSuggestionItemProps, loading } ) => (
            <div>
              <input
                { ...getInputProps( { onBlur: this.handleBlur  } ) }
            />
           ...

Thanks! Just had to remove this. on the newer version and it worked. Assumed it was a React bug for far too long.