update set initial value without dataset

[AlexCernik]

Hi, I think it's unnecessary to check if initialValue is in initialDataSet if you're going to be calling setSelectedItem later.

Try this, it will also update the selected value if a new item is added to the dataSet.

For example: initialValue is null on the screen, you navigate to a screen to create an item for the dataSet, then go back to the previous screen and select the newly created item.

This will select the initial item and then change if it gets updated.

[davidgvf]

hi @AlexCernik , this PR fixed my example?

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;