Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to select suggestions by clicking (only tab works) react-places-autocomplete #376

Open
Sithu-Soe opened this issue Aug 17, 2021 · 6 comments

Comments

@Sithu-Soe
Copy link

When i use with phone browser, can't even select with clicking. In Computer browser only work with tab.

`import React, { useState } from 'react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';

const LocationSearchInput = () => {
const [address, setAddress] = useState('');
const [coordinates, setCoordinates] = useState({
lat: null,
lng: null
});
const handleSelect = async value => {
const results = await geocodeByAddress(value);
const latLng = await getLatLng(results[0])
setAddress(value);
setCoordinates(latLng)
}
return (

{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (


<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>

{loading &&
Loading...
}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
{suggestion.description}

);
})}


)}

);

}`

@lowlyocean
Copy link

+1. I'm also experiencing that clicking a suggestion doesn't change input value. In my case I'm using PlacesAutocomplete as a child with a react-leaflet control

@ErinStearns
Copy link

also having this issue. clicking doesn't set the input value to the new address, only arrow keys and enter work

@SasiKumar-Ramesh
Copy link

+1. Is there any alternate workaround to this?

@lowlyocean
Copy link

+1. Is there any alternate workaround to this?

Might have some luck trying something like this, YMMV

@GaneshSinghPapola
Copy link

any fixes?

1 similar comment
@joao-salgado
Copy link

any fixes?

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

No branches or pull requests

6 participants