react-native-autocomplete-dropdown
react-native-autocomplete-dropdown copied to clipboard
The onBlur callback not working properly
Hi,
I've been struggling with closing the suggestion list while clicking elsewhere on the screen as neither the closeOnBlur nor onBlur props are working properly. Here's the reproducible simple example, where onBlur callback is not triggered properly when clicking outside of dropdown area eg. when clicking on the red area the onBlur callback is not triggered.
Could you please look it up?
import { StyleSheet, Text, View } from "react-native";
import {
AutocompleteDropdown,
AutocompleteDropdownContextProvider,
} from "react-native-autocomplete-dropdown";
export default function App() {
const mockSuggestions = [
{ id: "1", title: "Foo" },
{ id: "2", title: "Foo Foo" },
{ id: "3", title: "FooFoo" },
{ id: "4", title: "FooFooFoo" },
{ id: "5", title: "Foo" },
];
const onBlur = () => {
console.log("onBlur");
};
return (
<AutocompleteDropdownContextProvider>
<View style={styles.container}>
<View style={styles.view1} />
<View>
<AutocompleteDropdown
dataSet={mockSuggestions}
onBlur={onBlur}
// closeOnBlur={true}
textInputProps={{
style: {
width: 200,
height: 40,
},
}}
></AutocompleteDropdown>
</View>
<View style={styles.view2} />
</View>
</AutocompleteDropdownContextProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
},
view1: {
flex: 1,
backgroundColor: "red",
width: "100%",
},
view2: {
flex: 1,
backgroundColor: "blue",
width: "100%",
},
});