Bug in initial value #162
Description
I’m passing an initial value (defaultValue) to a component that uses AutocompleteDropdown from react-native-autocomplete-dropdown.
The defaultValue is received from the props and should be displayed in the input when the component renders. However, since the data (dataSet) is fetched from an API and updates asynchronously, the initial value does not appear in the input or the suggestion list, even though it exists in the data once the API response is received.
It seems that the initialValue is not updating correctly when the data (dataSet) changes. How can I ensure that the initial value is reflected in the input once the data is available?
type AutocompleteWorkDescriptionProps = {
projectId: string;
formatPrices: ProjectPricesFormat;
onSelectItem: (value: string, id: string) => void;
disabled?: boolean;
isError?: boolean;
defaultValue?: string;
};
const AutocompleteWorkDescription = (props: AutocompleteWorkDescriptionProps) => {
const { t } = useTranslation();
const { servicesPrice, isLoadingPrices, refetchProjectPrices } = useQueryGetProjectPrices(
props.projectId,
props.formatPrices
);
useFocusEffect(
React.useCallback(() => {
refetchProjectPrices();
return () => {};
}, [])
);
const [value, setValue] = useState('');
const getMappedPrices = () => {
if (!servicesPrice) return null;
return servicesPrice
.filter(price => !!price.concept)
.map(price => ({
id: price._id,
title: price.concept
}))
.filter(price => {
const normalizeString = (str: string) =>
str
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
return normalizeString(price.title).includes(normalizeString(value));
});
};
return (
<>
<AutocompleteDropdown
initialValue={props.defaultValue}
direction={Platform.select({ ios: 'down' })}
dataSet={getMappedPrices()}
loading={isLoadingPrices}
onSelectItem={() => {}}
suggestionsListMaxHeight={Dimensions.get('window').height * 0.3}
emptyResultText={t('noResults')}
showChevron={false}
clearOnFocus={false}
showClear={true}
inputHeight={56}
useFilter={false}
rightButtonsContainerStyle={{ gap: 8 }}
suggestionsListContainerStyle={{
backgroundColor: 'white'
}}
suggestionsListTextStyle={{
color: 'black'
}}
debounce={200}
/>
</>
);
};
export default AutocompleteWorkDescription;