ubilabs/react-geosuggest

A React autosuggest for the Google Maps Places API.

react-geosuggest's Issues

Best way to initialize component with existing data?

Hello, great component, thanks for your hard work!

Lets say I save the suggest object returned by onSuggestSelect.

Can I feed this object back into a certain prop to re-create the previous state?

Broken demo

Hey, the component you've got here looks great, but visiting the demo results in an invariant violation:

Error: Invariant Violation: App.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. app.js:7:17671

Styling place name separately from country and city

Hi @ro-ka! This library looks great, thank you! For my use-case, I need to style the country (and ideally, the city as well) separately from the place name.

In your demo, you have only one element in the li.geosuggest-item. I was wondering if it is possible today, or possible to add, the ability to distinguish country from the place name and render them with different css classes?

Selecting an suggested item using Enter submits the form

When the component lives in a form and one of the suggested items is selected using keyboard (arrows + hitting enter), the form is submitted.

From the source code I see you didn't include event.preventDefault() probably on purpose? Could this be at least configurable by props? There's no other way how to prevent this as you don't pass the event to the onSuggestSelect method.

The 'gmaps' object has functions instead of values (e.g. Lat/Lng)

Hi. I want to use the complete gmaps object as returned by the Google Maps API after I select a location. The other values are not enough for what I'm trying to do. The problem I'm facing is that the gmaps object is not the same as I would expect. For example, gmaps.geometry.location.lat is a function() instead of just being a number.

I checked this in both Firefox and Chrome on your example website.

Out of Box: Unexpected token <

Tried this out of the box, and got this error:

node_modules/react-geosuggest/src/Geosuggest.jsx Line 222: Unexpected token <

I'm sure it's something with complaining on my end. Any suggestions?

Cache requests to google Api

From google doc

Geocoding is a time and resource intensive task. Whenever possible, pre-geocode known addresses (using the Google Maps Geocoding API described here or another geocoding service), and store your results in a temporary cache of your own design.

A basic implementation can be found on the PR I submitted #29

Move Google Places script into component

Hi there! This is a great component, I am building a Meteor app using this plugin, and it would be nice if the component handled the script internally, so that the component could be loaded at any time, and handle it's own dependency on the external script.

Is this something that is possible? Or should I fork and make the changes tailored to my own needs?

Thanks!

Enhancements

What are your thoughts on exposing focus state, and a method to clear the input state ?
This would allow the page UI to depend on suggest being open or not, and also allow a google maps like clear button

Refs

After update the ref "geosuggestInput" does not work anymore. How can i get the input from outside to apply eg .focus().

Ability to pass on any options supported by Google API

Would be nice if we could pass on any options (Country for example) available here https://developers.google.com/maps/documentation/javascript/places-autocomplete to the react component.

calling clear() onFocus ?

Im sure this is straight forward but im getting
Uncaught TypeError: Cannot read property 'clear' of undefined

to make the input clear onFocus

using refs as described
https://facebook.github.io/react/docs/more-about-refs.html

  onFocus() {
    this.geosuggest.clear();
  }


<Geosuggest
   ref={(ref) => this.geosuggest = ref}
  onFocus={this.onFocus}
/>

Thanks in advance.

Place Details

If I made a PR for the below functionality, would you consider merging it?

1. new boolean property -> lookupPlaceDetail
2. if above property is true, lookup place details and add response to suggest data for use in the onSuggestSelect callback.

Thoughts?

Using dist/react-geosuggest.js with global React fails.

E.g.

bower install react
bower install react-geosuggest

And a basic template

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Index</title>
    <script src="bower_components/react/react.js" type="text/javascript" charset="utf-8"></script>
    <script src="bower_components/react-geosuggest/dist/react-geosuggest.js" type="text/javascript" charset="utf-8"></script>
</head>

</html>

I'm getting a.

Uncaught Error: Cannot find module 'react'

The README mentions that this usage should be possible.

window.React is exposed by react.js, but the requires in react-geosuggest.js can't find it, I might be missing a config option! I'm not sure if you can ask that webpack/browserify wrapper to do something to link those up.

Cheers!

We're looking into using the component in a ClojureScript/Reagent page which uses quite a different build system. It would be neat to avoid integrating a webpack/browserify step into the build for now but it might come to that anyway!

Support adding class name(s) to the input element

Any interest in adding this in? Would be handy

1.16.0 module build requiring modules incorrectly

Our application pulled in 1.16.0 of this module, and we get an error when importing:

Cannot find module './input.jsx'

I ran prepublish on this module, and the transpiled /module/Geosuggest.js has the expression require('./index.jsx'), but the transpiled file is actually named index.js.

Add component tests

It would be great if this component had tests, and code coverage metrics. We can use mocha, sinon, jsdom, proxyquire and testUtils.

Thoughts?

Using with material-ui?

Is possible? Thanks!

Allowed Input Attributes don't match the ones from React

React documentation says

These standard attributes are supported:

accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrapp```

your current list is :

autocapitalize autocomplete autocorrect autoFocus autosave disabled form formaction
formenctype formmethod formnovalidate formtarget height id inputmode maxlength maxlength
name pattern placeholder readonly required selectionDirection size spellcheck tabindex

Obviously, the React list is longer, but that is not a problem.
The problem is about stuff present in your list that are not handled by React.
For example autocapitalize.
Something else that you should be carefull, is the use of capital letter or not.
For example, React allows autoComplete, but you allow autocomplete.
This lead in stuff not being propagated.

Input is a void element warning

Any solution to get rid of the following React warning: Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of NewHaulPage.

Make it work with react 0.14.0-beta3

Great library. I'd love to use it, but I'm a react noob. I can't get this to work with my project based on relay-starter-kit, which uses react 0.14.0-beta3. For some reason, I can't get anything useful to install when I fork and upgrade the dependency. When I install via npm (there's no actual source, just the meta files like package.json).

A fix (maybe an alternative branch) would be very helpful.

Thanks!

React-geosuggest with react-formsy

Hi,

Would be nice to integrate it with react-formsy:

https://github.com/christianalfoni/formsy-react

Regards!

google is not defined

Hallo,

I'm trying to use the package but I get the error:

google is not defined, it refers to the googleMaps default prop.

It is maybe due to the fact that my code is running server and client side. I tried to force:
var GoogleMaps = window.google.maps;

but it is not working!

Is there a way to solve this?

Move react as peerDependency

1 line change but still it needs to be done :D

Submit Button

Is there an easy way to have a Submit button work the same as a onSuggestSelect?

Warning: setState(...): Can only update a mounted or mounting component.

When the Geosuggest input is in focus and the react route changes, the following warning pops in the console:

Warning: setState(...): Can only update a mounted or mounting component.
This usually means you called setState() on an unmounted component.
This is a no-op. Please check the code for the Geosuggest component.

Then it points to this part:

/**
 * When the input loses focused
 */
hideSuggests: function hideSuggests() {
  this.props.onBlur();
  setTimeout((function () {
    this.setState({ isSuggestsHidden: true });
  }).bind(this), 100);
},

Not sure if I am supposed to destroy the component somehow in my componentWillUnmount() ?

---

---

    "history": "~1.13.x",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-geosuggest": "^1.13.0",
    "react-router": "^1.0.2",

Add value/initialValue?

Does it make sense?

Support for 'no results found' case

Hi @ro-ka! Another n00b question:

How do you suggest we handle the case where no result is found in the auto-suggest? Is it possible for the input field to just take the string inputted and pass that as a value (or is that already being done?)

Using with redux-form

Im not sure if this really is this projects problem, but I have a form that uses this component as one of it's fields:

<Geosuggest onChange={this.onChange.bind(this)}

Form is validated using https://github.com/erikras/redux-form which seems to capture onChange events of this component somehow since my handler is not being called.

I guess this is because this project does not use prefixed onChange property?

Event when input changes the value

Hi,

I used your component and it's great. But then i ran into a problem that i need to listen to the input changes event, for example, if the input value is empty, my "Action" button will be disabled.

Unfortunately, there's no exposed function for that event yet.

issue with assets/webpack (react best practices)

In current release we unable to apply styles from variable.
For standart "webpack way" we requires styles as module and apply to element. For example:

import myCss from './mycss-or-less-or-scss-or-other'
....

And now i need apply my styles to element, but i cannot do that:

• https://github.com/ubilabs/react-geosuggest/blob/master/src/Geosuggest.jsx#L384
• https://github.com/ubilabs/react-geosuggest/blob/master/src/GeosuggestItem.jsx#L48
• and other hardcoded styles

For example ReactCSSTransitionGroup
accept class names as parameter

Browserify transform in package.json causes build errors

I am using Browserify to build my own project, but my build fails when I pull in this project as a dependency:

Cannot find module 'reactify' from '/node_modules/react-geosuggest'

This is because you have reactify in the browserify transforms section of your package.json (which means it is always executed when Browserify runs, even when it is required in by outside projects that install it via npm), but it isn't installed via dependencies. Thus, it crashes when Browserify can't find the missing dependency.

From the Browserify docs:

Now (that you have added a transform field to package.json) when somebody require()s your module, (the transform) will automatically be applied to the files in your module without explicit intervention by the person using your module.

I don't think this is a good practice for modules which are published for use on npm, because the compilation should have happened before publishing anyway (as you are already doing).

Since you are already using a Gulpfile, perhaps it would make more sense to just perform the JSX transformation as part of your Gulp task?

(FYI, this was working for me on version 1.2.1, but after the release of 1.2.3 it is now breaking)

Required input attr

When I put required nothing happens

<Geosuggest
  placeholder="Start location"
  ref="start_location"
  required
/>

Async script load

Current "no-async" solution is too slow for mobile clients.
It posible to load library "async way" with callback?

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
    async defer></script>

If i set types like 'country' or 'cities' nothing is returned

Just null in suggestsGoogle

    let types    = [
            'country'
        ];
    <Geosuggest types={types}/>

Errors when bundling react-geosuggest with Browserify on node 0.10.x

I have a project that pulls in react-geosuggest via npm. The project is bundled with Browserify + Babelify.

When I bundle this on node 0.10.x, I run into the following error:

23:05:12 Error: Cannot find module 'classnames' from '/src/node_modules/react-geosuggest/module'
23:05:12     at /src/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
23:05:12     at process (/src/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
23:05:12     at ondir (/src/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
23:05:12     at load (/src/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
23:05:12     at onex (/src/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
23:05:12     at /src/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
23:05:12     at Object.oncomplete (fs.js:107:15)

Bundling works on node v5.1.0, however.

As a workaround on node 0.10.x, I included classnames in our own package.json dependencies and bundling worked.

Happy to provide more details if it would help!

Point package.json main to built file

It would be worth updating the main property in the package.json file to point to dist/react-geosuggest.js (or equivalent pure JS file if that's not suitable) so that using require to pull react-geosuggest doesn't first require a build step.

For me, as this component is JSX, I have to update my webpack config and jest preprocessor script to include react-geosuggest as an allowed node_modules library to be included as part of the build.

Cannot find module './GeosuggestItem.jsx'

When I build my app with gulp and browserify, I get the error:

Cannot find module './GeosuggestItem.jsx' from /blahblah/node_modules/react-geosuggest/module

When I look at the directory specified in the error, there is a file "GeosuggestItem.js" (without the "x"). Why would it be looking for GeosuggestItem.jsx instead?

Follow react best practice and improve the separation of concerns

Here there are some points I would like to highlight

• props in getInitialState is an Anti-pattern https://github.com/ubilabs/react-geosuggest/blob/master/src/Geosuggest.jsx#L38 -> https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html
• To respect Single Responsibility Principle the input should have its own component and the same the list. This helps maintaining the code, replacing parts of the component and it could also improve component customization... For example would be easier to integrate my PR if all components were split correctly from the start. Decoupling is always better.
• Google api services should not be part of the state. Instead they should be members of the component. State is meant for mutable data not for third party libraries. If you never see setState({foo:"bar"}) but you have "foo" defined in your state you should start thinking you're doing something wrong ;)
• As a convention I just prefer to have the render() method ALWAYS a the bottom, lifecycle methods at the start of the file in the order they are called, component methods that are exposed just after lifecycle methods and in the middle private methods prefixed with _. You'll notice that it's not just my convention but it's what most of the people use today. See for example how FB guys write their components https://github.com/facebook/fixed-data-table/tree/master/src

These stuff can be found in my PR #29

InitialValue based on existing LatLng

Hey,

For edit mode, it could be useful if the initialValue can be restored automatically from an existing Lat/Lng.

Thanks!

reactify

Hi,

Great job you've done there. Thanks.
Just one question: why reactify is in dependencies and not devDependencies ?

Item selection seems to be broken sometimes

We had a bug reported of a user not being able to select an item from the suggestions.

I traced the problem to GeosuggestItem.onClick and Geosuggest.hideSuggests functions. There's a 100ms timeout before the state in Geosuggest component changes to hide the suggestions. If user clicks on a GeosuggestItem, the hideSuggests function is executed at the same time (on blur). If user doesn't release the mouse button to actually trigger a click event, the list of suggestions is gone and nothing has been selected.

What would be the most correct solution to this problem? Increasing the timeout interval in hideSuggests or simply using onMouseDown event in the GeosuggestItem instead?

Access Places Data

It's not clear from the Readme or Example.... does this return the Places API data (street_address, country, administrative_area_level_1, etc...) ?

For example i'm currently using a jQuery GeoComplete that returns these fields in the response.

I'm not terribly familiar with the Google API's, would that data require extra calls or does it just need to be exposed?

Thanks!

Fix BEM class naming

The Block is "geosuggest" while items are "input", "suggests" and "suggest-item".

So "geosuggest-item" here https://github.com/ubilabs/react-geosuggest/blob/master/src/GeosuggestItem.jsx should be changed to geosuggest__suggest-item

The --focus modifier should be added and used instead of https://github.com/ubilabs/react-geosuggest/blob/master/src/geosuggest.css#L20

Show suggestion pane again after hitting enter

• type
• make selection with keys
  --> suggestion pane hides
• type again for new search
  ==> no suggestion pane!

React Component Not Found

Good day,

Having an issue with the module not found.

I call it in app.jsx

var Geosuggest = require('geosuggest')

In console I get the following error:

ERROR in ./components/app.jsx
Module not found: Error: Cannot resolve module 'geosuggest' in /Users/sergiopellegrini/Sites/recipes-flux/client/components
resolve module geosuggest in /Users/sergiopellegrini/Sites/recipes-flux/client/components
looking for modules in /Users/sergiopellegrini/Sites/recipes-flux/node_modules
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest doesn't exist (module as directory)
resolve 'file' geosuggest in /Users/sergiopellegrini/Sites/recipes-flux/node_modules
resolve file
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest doesn't exist
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.js doesn't exist
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.jsx doesn't exist
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.js]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.jsx]
@ ./components/app.jsx 11:17-38

I then renamed the module to react-geosuggest but then get the following:

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

Your assistance will be much appreciated.

call clean() outside Geosuggest section

I have a button to clean form input value include geosuggest.

How to call clean() outside geosuggest section?

Powered by google?

Do you think it would be a good idea to have a "Powered by Google" at the bottom of the dropdown?

Add props validation

It's very common in the React world to use React.PropTypes not just for validation of component's props but also to have a clear picture of all the props that a component manage and for documentation.

In getDefaultProps is better to define just conditional props since mandatory props will be in any case overwritten.

An inspiration can be found on the PR I submitted #29

Removing United States from results

I'd like to remove Untied States from results. I did this which worked. Is there a more elegant way?

if(suggest.label.substr(suggest.label.length - 13) === "United States") {
    suggest.label = suggest.label.substring(0, suggest.label.length - 15);
}

In the getSuggestItems function on line 268