Google Places Auto Complete making input field go up

Question

I am working with the react-places-autocomplete package.

Whenever I type text into the input field and get suggestions, it makes the whole input field jumps up, ruining the look.

How can I get the input field to stay in place and just have the suggestions drop down normally? I've tried adding a position: relative and top: Npx style to the suggestions, but that doesn't stop the input field from jumping up.

Searchbar.js

 return (
    <div className="search">
      <PlacesAutocomplete
        value={locationChars}
        onSelect={handleSelect}
        searchOptions={{ types: ["(cities)"] }}
        onChange={handleChange}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              ref={inputRef}
              {...getInputProps({ placeholder: "Search Location" })}
              className="search-input"
            />
            <div className="suggestions-container">
              {loading ? <div>Loading...</div> : null}
              {suggestions.map((suggestion) => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "white",
                };
                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
      <SearchIcon className="search-icon" />
    </div>

Searchbar.css

.search {
  display: flex;
  flex: 1;
  align-items: center;
  border-radius: 24px;
  background-color: purple;
  margin-right: 1rem;
  color: black;
  opacity: 1 !important;
}

.search-input {
  height: 12px;
  padding: 10px;
  border: none;
  width: 100%;
}

.search-icon {
  padding: 5px;
  height: 22px !important;
  background-color: blue;
}

.suggestions-container 
}

Answer 1

Just a guess but you might want to do something with the suggestions-container class. I recently found react-google-autocomplete to be a very smooth experience btw. Happy Hacking!