An autocomplete component is loading everythig as expected but once it's loaded it remains disabled because it loads before check the "ready" status and it loads it disabled even when is ready.
Is there a way to load it asynchronously?
import React from 'react'
import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete'
import { GoogleMap,useLoadScript,Marker,InfoWindow } from "@react-google-maps/api";
import {Combobox,ComboboxInput,ComboboxPopover,ComboboxList,ComboboxOption} from "@reach/combobox";
import "@reach/combobox/styles.css";
function AutocompleteComp(props) {
const libraries = ["places"];
const { isLoaded, isError} = useLoadScript({
googleMapsApiKey: process.env.NEXT_PUBLIC_COMPONENT_GoogleMap_geolocation_apiKey,
libraries
});
const {
value,
suggestions: { status, data },
setValue,
clearSuggestions,
ready,
} = usePlacesAutocomplete({
callbackName: "Callback Function",
requestOptions: {
types: "address"
componentRestrictions: { country: ["ca","mx"] },
fields: ['address_component', 'adr_address', 'business_status', 'formatted_address', 'geometry', 'icon', 'name', 'permanently_closed', 'photo', 'place_id', 'plus_code', 'type', 'url', 'utc_offset', 'vicinity'],
},
debounce: 300,
});
const handleSelect = ({address}) => () => {
setValue(address, false);
clearSuggestions();
try {
const results = getGeocode({ address });
const { lat, lng } = getLatLng(results[0]);
ReturnState({ address: address, lat: lat, lng: lng, selected: results[0] })
return ({ address: address, lat: lat, lng: lng, selected: results[0] });
} catch (error) {
console.error(` Error:`, error);
}
};
if(isLoaded){
return (
<label htmlFor="search">"Type your search"
<Combobox onSelect={handleSelect}>
<ComboboxInput
id="search"
value={value}
onChange={(e) => setValue(e.target.value)}
className="combobox-input"
placeholder={"Placeholder"}
autoComplete="off"
disabled={!ready} //HERE IS THE PROBLEM
/>
<ComboboxPopover>
<ComboboxList>
{status === "OK" &&
data.map(({ place_id, description }) => (
<ComboboxOption key={place_id} value={description}/>
))}
</ComboboxList>
</ComboboxPopover>
</Combobox>
</label>
)
}
}
export default React.memo(AutocompleteComp)