Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The onBlur callback not working properly #111

Open
Winkielek opened this issue Mar 2, 2024 · 0 comments
Open

The onBlur callback not working properly #111

Winkielek opened this issue Mar 2, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@Winkielek
Copy link

Winkielek commented Mar 2, 2024

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%",
  },
});
@onmotion onmotion added the bug Something isn't working label Mar 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants