hibiken / react-places-autocomplete Goto Github PK

Doesn't work in safari

It would be a "nice to have" if the the input name could be passed as a prop. This would make it easier for acceptance testing to have an HTML hook to use.

Steps to reproduce:

1. Type some letters into the field
2. Hold down the delete key to delete the letters
3. The error appears when all the letters have been deleted

Reproducible on the demo page:

use eslint

Add clearable boolean prop & Add clearButton prop (functional react component)

wrong repo.. sorry

Allow an autoFocus prop that is sent down to the element. Useful for pages when the component is the main function.

Thanks for the great component!

Hi there I'm trying to allow 2 lines worth of address to be visible by the user.
Can i somehow use textArea?

The places autocomplete doesn't work on my mobile phone, has anyone been able to use it on mobile? Excuse me if this issue has already been presented, I could not find it elsewhere

Hi @kenny-hibino, thank you for putting out this library! I was wondering if you had any plans to put out a demo link, so one could test the functionality easily?

Also, was curious how it compares to react-geosuggest in your opinion?

Thank you!

I'm getting this warning,
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

printWarning @ warning.js:36
warning @ warning.js:60
get @ React.js:95
162../defaultStyles @ PlacesAutocomplete.js:352
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
164../PlacesAutocomplete @ index.js:8
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
6.react @ jobs_search_form.js:3
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ components.js:3
3../components/job @ components.js:5
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ _stream_0.js:29
2../components @ _stream_0.js:37
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1

Promise is widely used by now

As noted by google here:
https://developers.google.com/maps/documentation/javascript/places-autocomplete#fig1

Note: When you display predictions from Place Autocomplete, you must include the 'powered by Google' logo. This logo is included in the results list by default, as shown in the above example.

I've noted that this package does not seem to include the logo; Is this valid usage or should this package be showing the logo?

In the 5.0.0 update, there is a new prop called 'type' in inputProps

const inputProps = {
value,
onChange,
onBlur: () => {
console.log('blur!')
},
type: 'search',
placeholder: 'Search Places...',
autoFocus: true,
}

What does this prop do? This is just a guess, but does it control the type of request the component uses (PlaceSearchRequest vs AutocompletionRequest)? I'm looking to search for a specific type of place which isn't supported in AutocompletionRequest.

Hi @kenny-hibino ,

Have you considered allowing the choice of using a custom input component? That would be useful if you want to add autocomplete functionality to an existing input component (e.g., part of a different library). The PlacesAutocomplete component could act as a wrapper, with the component you want to add the autocomplete functionality to as its child. So it would look like:

<PlacesAutocomplete value={value} onChange={this.handleChange}><MyCustomInputComponent /></PlacesAutocomplete>

If you think this feature would make sense to add, I'd be happy to take a shot and open a PR.

The library should provide a helpful message in the console for user of the library 😄

Currently, you have to insert JS in main html file, like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=___API_KEY___&libraries=places"></script>

Would it be possible, perhaps in a future version, to add the API key & Google Places API inside the code, like this? That way the API key remains hidden in production.
geocodeByAddress.key(process.env.REACT_APP_GOOGLE_API_KEY)

Thank you 🙏🏽

I am getting this warning after adding the component to my project:

Warning: You are manually calling a React.PropTypes validation function for the autoFocus prop on PlacesAutocomplete. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

If you follow instruction in https://fb.me/react-warning-dont-call-proptypes , you can fix this warning that everyone, who is using this library, is getting.

Thank you

I cant seem to make it work with a click on the place. It works perfectly if i navigate with the arrow keys and select with enter key. Even the live demo does not work with a click. Has anyone else faced this issue?

Hi,
Is there a way to pass 'id' attribute to the input field of "PlacesAutocomplete". I need it so that when I click on the label for the input field, the input field will receive focus.
Thanks

I saw the four types mentioned in the Places docs.

I see how I can limit the autocomplete to establishments, but is there a way to specifically get the establishment name in addition to its address? So instead of "John's Restaurant, Pasadena, CA, USA", I would like to get "John's Restaurant".

This answer mentions it's possible, but React-Places-Autocomplete only returns an address, not a place_id or anything else. So I'm not sure how to make it work…?

@kenny-hibino

It could be useful to allow users to pass in a callback to execute when PlacesServiceStatus is not OK (i.e., no predictions were found). Currently it writes an error message to the console.

Along those same lines - when autocomplete fails, the current predictions aren't cleared so the autocomplete items remain visible. Do you think it would make sense to give the option of clearing the autocomplete items on fail? It could be a boolean prop, maybe clearItemsOnFail or something like that.

If this sounds good to you I'd be happy to do it and open a PR.

Thanks!

Need to rewrite tests

When I type "gdfg fdg ...G. DF GDFG FD", I have an real error.

Cannot read property 'lat' of null

Excepted :
STATUS : ZERO_RESULT

Solution :
if result[0] exist define lat : results[0].geometry.location.lat(
else lat : 0

Something like that.

Inside this function :

    geocoder.geocode({ address: address }, function (results, status) {
       if (status !== OK) {
         callback({ status: status }, null, results);
         return;
      }
      var latLng = {
        lat: results[0].geometry.location.lat(),
        lng: results[0].geometry.location.lng()
      };

      callback(null, latLng, results);
   });

I was testing this component with a screenreader and found a couple issues with the display of the autocomplete suggestions. When listening to the screenreader there is no way to know that a dropdown with suggestions has appeared as you type into the input.

Consider these two fairly simple options.

Option 1: provide a visually-hidden <span> that says to arrow down for autocomplete suggestions

<span class="visually-hidden" id="autocomplete-description">Arrow down for autocomplete suggestions</span>
<div aria-describedby="autocomplete-description" id="PlacesAutocomplete__autocomplete-container ... />

or Option 2: add the aria-live="polite" attribute so the screenreader will automatically start reading the suggestions as you type into the input.

<div aria-live="polite" id="PlacesAutocomplete__autocomplete-container ... >

I have tested both options with a screenreader and both work nicely to add a bit more accessibility to the autocomplete. If you like any of these suggestions I'd be happy to make a PR. 😁

Side note: I also noticed that the input has no <label> which is an accessibility requirement. This one isn't so much of an issue, as the developer using the component can easily add a <label> and the inputId={...} prop, but could also be solved by including a aria-label attribute by default.

Hello!, is debounce supported?, tryed to implement it with lodash but it seems that is tight coupled with the component.

I want to focus input element after the component did mount.
Case example: The user clicks change button after that the search input will be focused.

How to refer to input inside the component?

It looks like the component is discarding the placeID instead of using it to retrieve the coordinates via geocode.

I assume that addresses are usually 1:1 with geocode when taken directly from Places results, but would it be safer to geocode on placeID instead?

At the very least, it'd be helpful if placeID was returned along with suggestion

When componentDidMount called, the google library is still in loading.

Hello, thank you for the repo!

I ran into this problem while serving in prod :

Mixed Content: The page at 'https://MyUrl.com' was loaded over HTTPS, but requested an insecure resource 'http://maps.googleapis.com/maps/api/geocode/json?latlng=46.19018519999999,6.1402054000000135'. This request has been blocked; the content must be served over HTTPS.

Also I am using this repo but I don't know which repo is causing the error.

Hi,

I'm using version 4.1.3 of this library and npm outdated is showing there is a new version of 5.0.0. I was wondering if you could provide a changelog or more detailed release notes on what has changed in this update as it is a sem-ver major update. In this repo the last release version was 2.8.0, same with the tags so it's not really possible to do a proper diff and see if there are any breaking changes. Any extra information on this latest update would be appreciated!

Hi there,

Great component. Any integration using Material UI's AutoComplete control?

What about support for being wrapped by redux-form?

Thanks!

It would be useful to have the whole object available :)

Currently styling is set inline with defaultStyles.js, you can easily override the className of the autocomplete container but you cannot easily override it's styling because the styles are set inline.

Proposal

Move default styling to CSS or SCSS so the user can import the styling and override without touching Js.

1 - I write : "Paris, Fra"
2 - I select all the text "Paris, Fra"
3 - I write : "London"
4 - It gives me : "Paris, FraLondon"

Excepted

1 - I write : "Paris, Fra"
2 - I select all the text "Paris, Fra"
3 - I write : "London"
4 - Removes "Paris, Fra"
5 - It gives me : "London"

Thanks!

due to this part here, only mouse events are valid for selection

onMouseOver={() => this.setActiveItemAtIndex(p.index)}
onMouseDown={() => this.selectAddress(p.suggestion, p.placeId)}

changing onMouseDown to onClick or adding onTouchEnd and onTouchStart events should fix this.

Hi,

Would it be possible to manually resolve errors within the geocodeByAddress callback? I am unable to reference my error in order to show it to my users.

Uncaught TypeError: Cannot read property 'lat' of null
    at LocationForm.js:38
    at utils.js:12
    at geocoder.js:5
    at geocoder.js:3
    at jS (geocoder.js:2)
    at Im.<anonymous> (geocoder.js:3)
    at common.js:52
    at Pm.f (common.js:33)
    at Im.en (common.js:52)
    at Object.c [as _2rqwmm] (common.js:46)

Typing a place such as a restaurant or a bar return only the street without the street number.

To repro:

1. Search Daly city
2. Press Cmd + A
3. Type "San"

Am I the only one that gets Uncaught TypeError: Cannot read property 'suggestion' of undefined when the down key is pressed?

I use geocodeByAddress to find address, it works.

But If I type an approximative address, I have this result : this address is not correct but the long and lat is correct.

Now, how to use Long and Lat to find the real address please?

Thanks.

Hello!

I'm using your component and I need to highlight matching parts of predictions and user's input string.
As I know, in predictions set, returned by request, there is property 'matched_substrings' with the set of matches' length and offset.
Is it possible to add this property both to autocompleteItems and to formattedSuggestion, so it is possible to access matches through "render" using "autocompleteItem" property?

Or even do like this:
const formattedSuggestion = (structured_formatting) => ({
mainText: structured_formatting.main_text,
secondaryText: structured_formatting.secondary_text,
mainTextMatchedSubstrings: structured_formatting.main_text_matched_substrings,
secondaryTextMatchedSubstrings: structured_formatting.secondary_text_matched_substrings
});

main_text_matched_substrings and secondary_text_matched_substrings are contained in the structured_formatting of prediction, so it is possible to add it exactly to formatting function

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.

Either support passing props to underlying input, or allow user to provide component to render.

Thanks for the repo. I'm using it now but want to be able to split the address into separate fields. Google has the fillInAddress function but I'm too new at this to incorporate it. Here is a stackoverflow with the same issue in another set of code: http://stackoverflow.com/questions/42350100/google-places-autocomplete-react-component
Thanks!

handleEnterKey exists prematurely if autocompleteItems is empty.

It seems like this behavior was added in #53 as a response to an exception caused in handleKeyDown and it's subsequent call to selectActiveItemAtIndex. However handleEnterKey does not use the selectActiveItemAtIndex function so this check does not appear necessary, and prevents the onEnterKeyDown callback from triggering.

Too many things doing this one single component. Code should be split into small dump components and separate logic

This package looks great. Any plans to add radius filtering to limit results? I've seen other where you can pass in a location or country and limit results to a certain radius.

Thanks!