Chosing option from dropdown dosen't work in ScrollView

[val089]

Hi,

I have got problem when I try choose option from dropdown. It's dosen't work in ScrollView, but in View component it's ok. Do you know why, and how fix it to work corectly in ScrollView?

[onmotion]

Hi!

Please provide a code example and which platform. Did you try to use the examples from here https://github.com/onmotion/react-native-autocomplete-dropdown/tree/main/example ?

[val089]

This is my SearchBar component and it's not working inside ScrollView component.

` import React, { FC, useState, useRef, ReactElement } from 'react'; import { StyledProps, View, Pressable, Text, CloseIcon } from 'native-base'; import { MagnifyGlassIcon } from 'wiktappNative/src/assets/icons/MagnifyGlassIcon'; import { StyleSheet } from 'react-native'; import Colors from 'wiktappNative/src/styles/colors-palete'; import { AutocompleteDropdown, TAutocompleteDropdownItem, } from 'react-native-autocomplete-dropdown';

const randomOptions = [ { id: '1a', title: 'option1', }, { id: '2a', title: 'option2', }, { id: '3a', title: 'option3', }, { id: '4a', title: 'option4', }, ];

interface SearchBarProps { title?: ReactElement; options?: TAutocompleteDropdownItem[]; selectedItems: TAutocompleteDropdownItem[]; setSelectedItems: React.Dispatch< React.SetStateAction<[] | TAutocompleteDropdownItem[]>

; }

export const SearchBar: FC<SearchBarProps & StyledProps> = ({ title = null, options = randomOptions, selectedItems, setSelectedItems, ...restProps }) => { const [isFocused, setIsFocused] = useState(false); const dropdownController = useRef(null);

const onSelectItem = (selectedItem: TAutocompleteDropdownItem) => { const isInSelectedItems = selectedItems.find( item => item.id === selectedItem.id, );

if (isInSelectedItems) {
  return;
}

setSelectedItems(prevItem => [...prevItem, selectedItem]);

};

return ( <View> <View {...restProps}> {!!title && <Text style={styles.inputLabel}>{title}</Text>} <AutocompleteDropdown controller={controller => { // @ts-ignore dropdownController.current = controller; }} onSelectItem={item => item && onSelectItem(item)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} ClearIconComponent={<CloseIcon size={4} color="#fff" />} clearOnFocus={false} closeOnBlur={true} closeOnSubmit={false} initialValue={{ id: '2' }} dataSet={options} showChevron={false} inputContainerStyle={{ backgroundColor: Colors.MAIN_BACKGROUND, borderWidth: isFocused ? 2 : 1, borderColor: isFocused ? Colors.MAIN_GREEN : Colors.GREY_12, borderRadius: 24, height: 52, }} // textInputProps={textInputProps as AutocompleteDropdownProps} textInputProps={{ placeholder: 'Search', autoCorrect: false, autoCapitalize: 'none', style: { borderRadius: 8, height: 50, color: '#fff', paddingLeft: 18, }, }} suggestionsListContainerStyle={{ backgroundColor: '#3F3F3F', top: 59, zIndex: 99999, }} suggestionsListTextStyle={{ color: '#fff', }} rightButtonsContainerStyle={{ right: 50, height: 50, }} // @ts-ignore flatListProps={{ ItemSeparatorComponent: null }} /> <Pressable style={styles.searchButton} // @ts-ignore onPress={() => dropdownController.current.toggle()}> <MagnifyGlassIcon /> </Pressable> </View> </View> ); };

const styles = StyleSheet.create({ inputLabel: { color: '#fff', position: 'absolute', paddingHorizontal: 5, backgroundColor: Colors.MAIN_BACKGROUND, top: -10, left: 20, zIndex: 9999, }, inputContainer: { width: '100%', alignSelf: 'center', }, input: { width: '100%', borderRadius: 8, paddingHorizontal: 3, paddingVertical: 3, fontSize: 16, }, searchButton: { position: 'absolute', right: 0, top: '10%', }, });

`

[val089]

ok, I will try to use these examples

[onmotion]

Make sure your parent View or ScrollView takes up all the space (flex: 1). You can check it with color background of them.

[val089]

Ok, It's working now, thank you :)

[BossBele]

For my case, it was with the nested ScrollView and KeyboardAwareScrollView which were parents of the autocomplete dropdown. Setting ScrollView options (on the parent ScrollView) as shown in the example worked:

<ScrollView
          nestedScrollEnabled
          keyboardDismissMode="on-drag"
          keyboardShouldPersistTaps="handled"
          contentInsetAdjustmentBehavior="automatic"
>

[walter-ayala]

@BossBele thank u for that solution!