Form control input value going out of view

[aliyaus]

Seeing a possible intermittent issue where typing anything moves the text to the left of the autocomplete container and you can only see the last few characters of what you entered. Seeing this on a Safari browser.

Can anyone assist please?

[Tintef]

Please provide code to reproduce

[aliyaus]

App.js

<div className="main-section">
<h1>Header Title</h1>
<div className="autocomplete-container">
     <div>
     <Form>
         <GooglePlacesAutocomplete
                        apiKey={API_KEY}
                        selectProps={{
                            value: searchObj.value,
                            onChange: (value) => onChangeAddress(value),
                            placeholder:  "search"
                        }}
            />

          <Button className="submit-ban" onSubmit={onSubmitHandler)>
          Search
        </Button>
   </Form>
  </div>
</div>
</div>

css

.main-section-content {
  padding: 10vh 5vw;
}

.autocomplete-container {
  margin-bottom: 2vh;
}

.submit-btn{
width: 100%; 
margin-top: 2vh; 
}

[Tintef]

That's not enough to exactly reproduce your issue, but using similar code it works just fine on codesandbox, so I'm guessing it has something to do with either your searchObj or what you are doing on onChangeAddress.

import { useState} from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
import "./styles.css";

export default function App() {
  const [value, setValue] = useState('');

  return (
    <div className="main-section">
      <h1>Header Title</h1>
      <div className="autocomplete-container">
        <form>
          <GooglePlacesAutocomplete
            apiKey={API_KEY}
            selectProps={{
              value,
              onChange: (value) => setValue(value),
              placeholder:  "search"
            }}
          />

          <button className="submit-ban" onSubmit={console.log}>
            Search
          </button>
        </form>
      </div>
    </div>
  );
}