react-places-autocomplete pushing down the other components below

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 components 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-autocomplete 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 PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autocomplete';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

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>
      <PlacesAutocomplete
        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="autocomplete-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>
        )}
      </PlacesAutocomplete>
      </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 './components/Placepicker/index';

function App() {
  return (

      <LocationSearchInput/>
  );
}

export default App;

Solution

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

Add this css -

.autocomplete-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;
}

.autocomplete-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;
}