react-places-autocomplete
react-places-autocomplete copied to clipboard
hibiken
How to restrict input to be selected from suggestions only and ignore custom text using Redux Form
Hi there,
Thanks for this great component.
How to restrict the input to be selected from suggestions only and not allowing users to enter custom address?
While using with Redux-Form it's validating the empty input but as soon as started typing it validates even the custom address. I want this to be selected from suggestions only. I have tired couple of ways to achieve this but reset button is not enabled with custom input value.
Please let me know if there is any solution to this?
Thanks Anil
import React, { Component } from "react"; import PlacesAutocomplete from "react-places-autocomplete";
class AddressAutoComponent extends Component {
constructor(props) {
super(props);
this.state = { address: "", location: "" };
}
handleChange = address => {
this.setState({ address });
this.props.input.onChange();
};
handleSelect = address => {
this.setState({ address, location: address });
this.props.input.onChange(address);
};
handleError = (status, clearSuggestions) => {
clearSuggestions();
};
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.input.value !== prevState.location && prevState.address === prevState.location) {
return {
address: "",
location: ""
};
}
return null;
}
render() {
const {
label,
id,
input,
icon,
meta: { touched, error }
} = this.props;
const classFormGroup = (touched && error && "form-group has-error") || "form-group";
const searchOptions = {
types: ["address"],
componentRestrictions: { country: "us" }
};
return (
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
onError={this.handleError}
searchOptions={searchOptions}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div className={classFormGroup}>
<label className="control-label" htmlFor={id}>
{label}
<div className="input-group">
{icon && (
<span className="input-group-addon">
<span className={glyphicon ${icon}} />
)}
<input className="form-control" {...getInputProps()} />
{touched && error && (
<span className="help-block">{error}
)}
<div className="autocomplete-dropdown-container">
{loading && "Loading..."}
{suggestions.map(suggestion => (
<div
{...getSuggestionItemProps(suggestion)}
className="suggestion"
key={suggestion.id}
>
{suggestion.description}
))}
)}
</PlacesAutocomplete>
);
}
}
export default AddressAutoComponent;
