react-native-dropdown-picker icon indicating copy to clipboard operation
react-native-dropdown-picker copied to clipboard

Dropdown inside TextInput from React Native Paper

Open LGZ04 opened this issue 3 years ago • 3 comments

Someone know why I can't select an item when I wrap the Dropdown inside a the React Native Paper, TextInput. The dropdown open correctly and I can see all the items, but when im trying to select one I can't, its untouchable. Here is what im trying to do.

Thanks for the help.

setOpenCurrencyDropdown = (openCurrencyDropdown) => {
    this.setState({
        openCurrencyDropdown,
    });
}
<View style={{
    margin: 10,
    padding: 10,
}} >
    <TextInput
        returnKeyType={"next"}
        label="Currency Code"
        style={{
            marginTop: 7,
            backgroundColor:"white",
            height: hp("10%")
        }}
        mode='flat'
        underlineColor={'white'}
        value={this.state.currencyCode}
        render={props =>
            <DropDownPicker
                {...props}
                open={this.state.openCurrencyDropdown}
                setOpen={this.setOpenCurrencyDropdown}
                defaultValue={this.state.currencyCode}
                items={[
                           { label: "CRC", value: "CRC" },
                           { label: "USD", value: "USD"},
                           { label: "GTQ", value: "GTQ"},
                 ]}
                containerStyle={{ marginVertical: 5, marginTop: 25 }}
                style={{
                    backgroundColor: "white",
                    borderRadius: 4,
                    borderWidth: 0,
                    width: wp("88%"),
                    marginLeft: 3
                }}
                itemStyle={{
                    justifyContent: "flex-start"
                }}
                dropDownStyle={{
                    backgroundColor: "white",
                }}
                setValue={(callback) => {
                    this.setState(state => ({
                        currencyCode: callback(state.label)
                    }));
                }}

            />
        }
    />
</View>

LGZ04 avatar Oct 05 '21 00:10 LGZ04

probably something to do with zIndexes #376 or perhaps one of the rules is violated https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules - I won't have time to help troubleshoot it though, sorry, perhaps someone else will

mikehardy avatar Oct 05 '21 16:10 mikehardy

probably something to do with zIndexes #376 or perhaps one of the rules is violated https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules - I won't have time to help troubleshoot it though, sorry, perhaps someone else will

Thanks for your answer. I already tried that, however I have not been able to solve the problem. I hope someone else can help me.

LGZ04 avatar Oct 05 '21 17:10 LGZ04

@LGZ04 your parent component has a background and border property apparently. when you have one of these two properties, the Picker seems to break from my experience

dacapoo avatar Feb 15 '22 08:02 dacapoo