Nesting SelectDropdown inside a ScrollView with search enabled causes the search bar to be focused and steal the first touch

[steve1316]

Device: Samsung Galaxy S20+ on Android 13 Pixel Dimensions: 1080x2400

Summary

Two touches are needed to do anything when a SelectDropdown is nested inside a ScrollView. Used your code from demo3.js as a demonstration as shown in the attached video.

Steps to Reproduce

1. Nest a SelectDropdown with the search flag enabled inside a ScrollView component from react-native package.
2. Press on the nested SelectDropdown to show the dropdown view.
3. Press on any country or press outside of the dropdown to dismiss it.

Expected Behavior

• Only one touch is needed to select an item or dismiss the dropdown.

Actual Behavior

• Two touches are needed.
• Observe from the attached recording that the search bar was made active / took focus when the dropdown view was displayed in Step 2. First touch is stolen by the search bar and it takes its focus away. The second touch will initiate the expected behavior (selecting an item or dismissing the dropdown view).

https://user-images.githubusercontent.com/18709555/203469943-a92a0b58-c96f-491e-b455-edeaa96d10b3.mp4

// Code is taken directly from your demo3.js and adjusted to showcase two SelectDropdowns where one 
// is not inside a ScrollView component and the other one is. The styles are unchanged from demo3.js.

const renderHeader1 = () => {
        return (
            <View style={[styles.header, styles.shadow]}>
                <Text style={styles.headerTitle}>{"Outside of the ScrollView"}</Text>
            </View>
        )
    }

    const renderHeader2 = () => {
        return (
            <View style={[styles.header, styles.shadow]}>
                <Text style={styles.headerTitle}>{"Inside the ScrollView"}</Text>
            </View>
        )
    }

    return (
        <SafeAreaView style={styles.saveAreaViewContainer}>
            <StatusBar backgroundColor="#FFF" barStyle="dark-content" />

            <View style={styles.viewContainer}>
                {renderHeader1()}
                <View style={styles.scrollViewContainer}>
                    <SelectDropdown
                        data={countries}
                        // defaultValueByIndex={1}
                        // defaultValue={'England'}
                        onSelect={(selectedItem, index) => {
                            console.log(selectedItem, index)
                        }}
                        defaultButtonText={"Select country"}
                        buttonTextAfterSelection={(selectedItem, index) => {
                            return selectedItem
                        }}
                        rowTextForSelection={(item, index) => {
                            return item
                        }}
                        buttonStyle={styles.dropdown2BtnStyle}
                        buttonTextStyle={styles.dropdown2BtnTxtStyle}
                        renderDropdownIcon={(isOpened) => {
                            return <FontAwesome name={isOpened ? "chevron-up" : "chevron-down"} color={"#FFF"} size={18} />
                        }}
                        dropdownIconPosition={"right"}
                        dropdownStyle={styles.dropdown2DropdownStyle}
                        rowStyle={styles.dropdown2RowStyle}
                        rowTextStyle={styles.dropdown2RowTxtStyle}
                        selectedRowStyle={styles.dropdown2SelectedRowStyle}
                        search
                        searchInputStyle={styles.dropdown2searchInputStyleStyle}
                        searchPlaceHolder={"Search here"}
                        searchPlaceHolderColor={"#F8F8F8"}
                        renderSearchInputLeftIcon={() => {
                            return <FontAwesome name={"search"} color={"#FFF"} size={18} />
                        }}
                    />
                </View>
            </View>

            <View style={styles.viewContainer}>
                {renderHeader2()}
                <ScrollView showsVerticalScrollIndicator={false} alwaysBounceVertical={false} contentContainerStyle={styles.scrollViewContainer}>
                    <SelectDropdown
                        data={countries}
                        // defaultValueByIndex={1}
                        // defaultValue={'England'}
                        onSelect={(selectedItem, index) => {
                            console.log(selectedItem, index)
                        }}
                        defaultButtonText={"Select country"}
                        buttonTextAfterSelection={(selectedItem, index) => {
                            return selectedItem
                        }}
                        rowTextForSelection={(item, index) => {
                            return item
                        }}
                        buttonStyle={styles.dropdown2BtnStyle}
                        buttonTextStyle={styles.dropdown2BtnTxtStyle}
                        renderDropdownIcon={(isOpened) => {
                            return <FontAwesome name={isOpened ? "chevron-up" : "chevron-down"} color={"#FFF"} size={18} />
                        }}
                        dropdownIconPosition={"right"}
                        dropdownStyle={styles.dropdown2DropdownStyle}
                        rowStyle={styles.dropdown2RowStyle}
                        rowTextStyle={styles.dropdown2RowTxtStyle}
                        selectedRowStyle={styles.dropdown2SelectedRowStyle}
                        search
                        searchInputStyle={styles.dropdown2searchInputStyleStyle}
                        searchPlaceHolder={"Search here"}
                        searchPlaceHolderColor={"#F8F8F8"}
                        renderSearchInputLeftIcon={() => {
                            return <FontAwesome name={"search"} color={"#FFF"} size={18} />
                        }}
                    />
                </ScrollView>
            </View>
        </SafeAreaView>
    )

[AdelRedaa97]

If the button is inside a scrollview or flatlist you have to add keyboardShouldPersistTaps="always" prop in the parent scrollview or flatlist

[steve1316]

Thank you, Adel! That fixed it.