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

The onBlur callback not working properly

Open Winkielek opened this issue 1 year ago • 0 comments

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%",
  },
});

Winkielek avatar Mar 02 '24 05:03 Winkielek