Async component AutoCompleteElement selects first option forcibly when passing autoCompleteProps

[aniket-teltumbade-au9]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When passing autoCompleteProps to the AutoCompleteElement, the component forcibly selects the first option after loading. Regardless of the user input, it reverts back to the first option's label and trims other user input.

Expected behavior 🤔

The AutoCompleteElement should allow users to enter their input without automatically reverting to the first option. It should maintain the user's input while also showing suggestions based on what the user types.

Steps to reproduce 🕹

Steps

1. Load the component MyComp.
2. Begin typing into the input field.
3. Observe that after the suggestions load, the input field reverts to the first option's label.
4. Try typing different values and notice that the input continues to revert back to the first suggestion.

[aniket-teltumbade-au9]

import React from "react";

function MyComp() { const [searchedPlace, setSearchedPlace] = useState<{ gps: { coordinates: number[] }; label?: string; type: string; } | null>(null); const [inputValue, setInputValue] = useState(""); const [searching, setSearching] = useState(false); const [placesList, setPlacesList] = useState([]); const [fetchPlaces, { data, loading, error }] = useLazyQuery( AUTOCOMPLETE_PLACES_LIST, { fetchPolicy: "no-cache" } ); const [fetchPlace, { data: data1, error: error1 }] = useLazyQuery( AUTOCOMPLETE_PLACES_LIST ); useEffect(() => { if (searching) return; if (inputValue.length < 3) setPlacesList([]); else { const fetchPlaceCallback = async () => { setSearching(true); const { data: result } = await fetchPlaces({ variables: { params: { places: { input: inputValue } } }, }); setPlacesList( result.search.places.map((el) => ({ label: el.placeName, value: el.placeId, })) ); setSearching(false); }; fetchPlaceCallback(); } }, [fetchPlaces, inputValue]);

const handleInputChange = (e) => { setInputValue(e.target.value); }; const handleChange = async (e) => { if (e?.currentTarget?.dataset?.id) { await fetchPlace({ variables: { params: { places: { placeId: e.currentTarget.dataset.id } }, }, }); } }; return ( <AutoCompleteElement autocompleteProps={{ autoComplete: false, autoSelect: false, onChange: handleChange, renderOption: (props, option) => { return ( <li {...props} data-id={option.value} onClick={handleChange}> {option.label} ); }, }} loading={loading} name={extra.search.${name}} options={placesList ?? []} textFieldProps={{ onChange: handleInputChange }} /> ); }

export default MyComp;

[dohomi]

Please provide a repro in codesandbox or similar to look at.

[aniket-teltumbade-au9]

resolved it sorry