Delay in react-places-autocomplete dropdown suggestions

[akhilmr95]

@hibiken

Here is my MapComponent.js:-

import React, { render, Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

class MapComponent extends Component {
    constructor(props) {
        super(props);
            this.state = {
            taddress: ' '
         }

         this.handleLocationSearchInputChange = this.handleLocationSearchInputChange.bind(this);
         this.handleLocationSelect = this.handleLocationSelect.bind(this);
    }

     handleLocationSearchInputChange(address) {
         this.setState({ taddress: address });
     }

    handleLocationSelect(address) {
        geocodeByAddress(address)
            .then(results => getLatLng(results[0]))
            .then(latLng => console.log('Akhil handleLocationSelect Success', latLng))
            .catch(error => console.error('Error', error));
    }

    handleMapMounted(map) {
        this._map = map;
    }
    render() {
    var url = "https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places";
       return(
          <MapOtherLocation
               center={this.state.currentLatLng}
           onMapMounted={this.handleMapMounted}
           onLocationSearchCancel={this.handleOtherLocationSearchCancel} 
           onLocationSearchChange={this.handleLocationSearchInputChange}
           onLocationSelect={this.handleLocationSelect}
           locationAddress={this.state.taddress}
           googleMapURL={url}
           loadingElement={<div>Loading map...</div>}
           containerElement={<div style={{ height: `100%`, width: '100%' }} />}
           mapElement={<div style={{ height: `85%`}} />}
         /> 
       );
    }

Here is my MapOtherLocation.js:-

import React, { render, Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, GoogleMapLoader } from "react-google-maps";
import PlacesAutocomplete, {
  geocodeByAddress,
  geocodeByPlaceId,
  getLatLng,
} from 'react-places-autocomplete';

const MapOtherLocation = withScriptjs(withGoogleMap((props) =>

   <GoogleMap
      ref={props.onMapMounted}
      defaultZoom={15}
      center={props.center}
      options={mapOptions}
      defaultCenter={{ lat: props.center.lat, lng: props.center.lng }}
   >

   <div style={{position: 'absolute', width: '420px', right: '290px', top: '60px' }}>
      <PlacesAutocomplete
         value={props.locationAddress}
         onChange={props.onLocationSearchChange}
         onSelect={props.onLocationSelect}
      >{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
         <div>
            <input
               {...getInputProps({
                  placeholder: 'Search Places ...',
                  className: 'location-search-input',
                  autoFocus: true,
                  })
               }
               style={{
                  position: 'absolute',
                  width: '400px',
                  borderRadius: '5px',
                  height: '35px',
                  padding: '5px 5px 5px 7px',
                  border: '1px solid transparent',
                  boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)',
                  boxSizing: 'border-box',
               }}
            />
            <div className="autocomplete-dropdown-container"
               style={{
                  position: 'absolute',
                  top: '36px',
                  width: '400px',
               }}
            >{loading && <div>Loading...</div>}
             {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,
                         })
                      }
                   >
                      <span>{suggestion.description}</span>
                   </div>
                );
             })}
            </div>
         </div>
      )}
      </PlacesAutocomplete>
    </div>
    </GoogleMap>
));
module.exports = MapOtherLocation;

@hibiken I am using ""react-google-maps" to load map and "react-places-autocomplete" to search and show suggestions. Below are the issues i am facing:- 1)With the above code, while i typing a location in search bar the value does not get printed in the log put in handleLocationSearchInputChange because i see its not getting called even the state is set every time we type in handleLocationSearchInputChange. Is this expected? When i check in developer options, once i start typing i dont see the "value" attribute at all in the input tag even though if am passing the value prop to . When i check the same in your demo, the value attribute is initially empty and gets changed everytime i type, with the updated value. How do i solve this issue in my code? 2)When i type a location, the dropdown does not come like it comes in you demo. How can fix this? How ever when i see the demo, the dropdown comes very quickly with suggestions. How can i achieve this? 3)When i type and click enter in search box, it clears the search box and throws invalid request error. I see it internally calls handleEnterKey but i am still facing this issue. If i type and click outside using a mouse, only then the dropdown comes and does not come when i start typing like mentioned in 2nd point above.

Please help with my above queries @hibiken. Thanks in advance..!!

[akhilmr95]

@hibiken please look into this. Thanks..!!