I have been struggling with this issue for sometime. Using the same example given in the latest README.md githun repo is pushing the other ponents below, which is not a better user experience. I have included a simple text field below to demonstrate this. Also tried using position as absolute, didn't work.

react-places-autoplete uses google maps javascript API which I am using for places suggestion

without place suggestion dropdown

Image with place suggestions pushing down the below text field

Here is my code

import React from 'react';
import PlacesAutoplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autoplete';
import TextField from '@material-ui/core/TextField';
import Autoplete from '@material-ui/lab/Autoplete';

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(response => response)
      .then(response => {
      })
      .catch(error => console.error('Error', error));
      this.setState({ address });
  };

  render() {
    return (
        <div>
      <div>
      <PlacesAutoplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
      {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autoplete-dropdown-container">
              {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>
        )}
      </PlacesAutoplete>
      </div>
      <TextField
          id="outlined-basic"
          label="Outlined"
          margin="normal"
          variant="outlined"
        />
      </div>

    );
  }
}

export default LocationSearchInput;

And this is my App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import LocationSearchInput from './ponents/Placepicker/index';

function App() {
  return (

      <LocationSearchInput/>
  );
}

export default App;

I have been struggling with this issue for sometime. Using the same example given in the latest README.md githun repo is pushing the other ponents below, which is not a better user experience. I have included a simple text field below to demonstrate this. Also tried using position as absolute, didn't work.

react-places-autoplete uses google maps javascript API which I am using for places suggestion

without place suggestion dropdown

Image with place suggestions pushing down the below text field

Here is my code

import React from 'react';
import PlacesAutoplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autoplete';
import TextField from '@material-ui/core/TextField';
import Autoplete from '@material-ui/lab/Autoplete';

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(response => response)
      .then(response => {
      })
      .catch(error => console.error('Error', error));
      this.setState({ address });
  };

  render() {
    return (
        <div>
      <div>
      <PlacesAutoplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
      {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autoplete-dropdown-container">
              {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>
        )}
      </PlacesAutoplete>
      </div>
      <TextField
          id="outlined-basic"
          label="Outlined"
          margin="normal"
          variant="outlined"
        />
      </div>

    );
  }
}

export default LocationSearchInput;

And this is my App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import LocationSearchInput from './ponents/Placepicker/index';

function App() {
  return (

      <LocationSearchInput/>
  );
}

export default App;

• javascript
• reactjs
• dropdown
• autosuggest

3 Answers 3

You need to give an absolute and an z-index styling to your autoplete container

Add this css -

.autoplete-dropdown-container{
   position: "absolute";
   z-index: 1000;
}

EDIT: css i used that worked -

.location-search-input,
.location-search-input:focus,
.location-search-input:active {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
  border: honeydew;
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 16px;
  border-radius: 2px;
  outline: none;
}

.autoplete-dropdown-container {
  border-bottom: honeydew;
  border-left: honeydew;
  border-right: honeydew;
  border-top: 1px solid #e6e6e6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  position: absolute;
  z-index: 1000;
  border-radius: 0 0 2px 2px;
}

You can try positioning it absolute - something like this:

styles={{
  listView:{
    position: 'absolute',
    backgroundColor: '#FFF',
    zIndex: 10,//Forcing it to front
  }
}}

You need to set absolute position and zIndex

className="autoplete-dropdown-container"
 styles={{
   listView:{
    position: 'absolute',
    backgroundColor: 'white',
    zIndex: 2,
   }
 }}>