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 {...restProps}>
{!!title && {title}}
<AutocompleteDropdown
controller={controller => {
// @ts-ignore
dropdownController.current = controller;
}}
onSelectItem={item => item && onSelectItem(item)}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
ClearIconComponent={}
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()}>




);
};

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!