0

I am building a basic weather forecast app using React and Material UI. I am using Autocomplete provided by MUI. The issue I am facing is that after I type a place-name in the text field and get the options rendered, the text field loses its focus. I understand it is due to the setPlaceList(response.data); cause when I comment it out and put only console.log(response.data); the text field doesn't lose its focus.

Here is the code:

const [placeList, setPlaceList] = useState([]);

const onValueChange = (e) => {
        if(e.target.value.length > 3){
            getCordinates(e.target.value);
        }
    }

const getCordinates = debounce (place => {

        axios.get(`https://api.locationiq.com/v1/autocomplete.php?key=${api_key}&q=${place}`)
        .then((response) => {
            setPlaceList(response.data);
            console.log(response.data)
        })
        .catch((e)=>{
            window.alert("ENTER CORRECT LOCATION")
        })
    },500);


<Autocomplete className={styles.searchBar} freeSolo
              options={placeList}
              getOptionLabel={(option) => option.display_name}
              onChange={onPlaceSelect} 
              renderInput={params => (
                  <CssTextField
                  {...params}
                  onChange={onValueChange} 
                  label="Enter Location" variant="outlined" required
                  />
                )}
              />

I am not pasting onPlaceSelect function as it executes after I have selected a place from the drop-down and I don't think it is required for this problem. Below is the visual representation of what is happening...

As you can see the focus is still there even after I have typed in the place name cause I have commented setPlaceList(response.data); . The response did get printed in the console

Now I have uncommented the setPlaceList and as you can see the options got rendered but the focus is disabled disallowing me to type anything further

  • Please create a [code sandbox](https://codesandbox.io/s/new) that reproduces your problem. – Ryan Cogswell Jul 05 '20 at 11:34
  • I suspect that the cause is how you are defining `CssTextField`, but I can’t be certain since you aren’t showing that code. It needs to be defined at the top level, but I suspect it is defined inside of another component instead . – Ryan Cogswell Jul 05 '20 at 11:43
  • @RyanCogswell God damn. That was exactly what I was doing. I had defined it inside my Search component which had caused this issue. Can you post this as an answer and also give a little bit of explanation as to why exactly it was happening this way so I can accept the answer? – Kevin Dewinter Jul 05 '20 at 12:24
  • You can find explanation in the duplicate I just linked this to. – Ryan Cogswell Jul 05 '20 at 12:40
  • Also https://stackoverflow.com/questions/57433546/react-slider-with-custom-hook-not-working-properly/57434343#57434343 and https://stackoverflow.com/questions/55192935/react-material-ui-menu-anchor-broken-by-react-window-list/55203218#55203218 have similar root causes. – Ryan Cogswell Jul 05 '20 at 12:42

0 Answers0