How do i automatically focus on the select input in GooglePlacesAutoComplete

Question

I'm using the react-google-places-autocomplete package and i want to customise the look a bit so that when i click on let's say a button or a div, it automatically shows the select input and automatically focuses on the input. How do i achieve this?

const LocationInput: React.FunctionComponent<ILocationInputProps> = ({
values,
setValues,
state,
icon,
onClick,
label,
 }) => {

const autocompleteRef = React.useRef(null);

const handleButtonClick = () => {
    console.log('autocompleteRef: ', autocompleteRef);
    autocompleteRef.current?.focus();
};

return (
    <div className="px-3 cursor-pointer">
        <div className="flex w-full mb-4 lg:mb-0 items-center space-x-2 ">
            {icon}
            <p className="text-white">{label}</p>
        </div>

        {state ? (
            <GooglePlacesAutocomplete
                ref={autocompleteRef}
                selectProps={{
                    onChange: (data) => setValues({ ...values, location: data.label }),
                    placeholder: 'Search Location',
                    styles: {
                        input: (provided) => ({
                            ...provided,
                            color: 'black',
                        }),
                        option: (provided) => ({
                            ...provided,
                            color: 'white',
                            background: '#00000000',
                        }),
                        singleValue: (provided) => ({
                            ...provided,
                            // color: "blue",
                            // background:"black"
                        }),
                        control: (provided) => ({
                            ...provided,
                            width: '100%',
                            background: 'rgba(255, 255, 255, 0.25)',
                            border: '1px solid rgba(255, 255, 255, 0.41)',
                            backdropFilter: 'blur(50px)',
                            borderRadius: '12px',
                        }),
                        menu: (provided) => ({
                            ...provided,
                            width: '100%',
                            background: 'rgba(255, 255, 255, 0.25)',
                            border: '1px solid rgba(255, 255, 255, 0.41)',
                            backdropFilter: 'blur(50px)',
                            borderRadius: '12px',
                        }),
                        container: (provided) => ({
                            ...provided,
                            marginTop: '5px',
                        }),
                    },
                    // isMulti:true
                }}
                apiKey={import.meta.env.VITE_GOOGLE_MAPS_API}
            />
        ) : (
            <div
                className="flex w-full mt-2 px-4 py-2 lg:p-0 rounded-xl border border-white lg:border-none items-center justify-between"
                onClick={handleButtonClick}
            >
                <div className="text-white flex-grow">{values?.location || 'Select'}</div>
                <FiChevronDown size={22} color="#EE3E38" />
            </div>
        )}
    </div>
  );
};

export default LocationInput;

How do i achieve this? this is the code above

Answer 1

just add autoFocus: true, to the selectProps and it works just fine