React-native-ui-kitten: Async Autocomplete does not show options initially

[fzf]

🐛 Bug Report

When typing a value that is processed async the results do not populate until a user clicks in the box again.

To Reproduce

Steps to reproduce the behavior:

It is currently broken in the showcase

Expected behavior

Results should appear as soon as text is typed.

Link to runnable example or repository (highly encouraged)

showcase

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | |
| @ui-kitten/components | v5.0.0 |

[artyorsh]

@fzf thanks for reporting. I faced the same in the project I'm currently working on.
You may try using the workaround below if you use function components:

  // TODO: UI Kitten issue.
  // Not updates data list visibility, if initially focused with wrong value.
  React.useEffect(() => {
    const shouldBecomeVisible = (autocompleteRef.current?.isFocused() || false) && (data?.length || 0) > 0;
    if (autocompleteRef.current?.state.listVisible !== shouldBecomeVisible) {
      autocompleteRef.current?.setState({ listVisible: shouldBecomeVisible });
    }
  }, [data?.length]);

[fzf]

@artyorsh thanks for the code. Looking forward to a better solution in the future.

[Rizayev]

@fzf thanks for reporting. I faced the same in the project I'm currently working on.
You may try using the workaround below if you use function components:

  // TODO: UI Kitten issue.
  // Not updates data list visibility, if initially focused with wrong value.
  React.useEffect(() => {
    const shouldBecomeVisible = (autocompleteRef.current?.isFocused() || false) && (data?.length || 0) > 0;
    if (autocompleteRef.current?.state.listVisible !== shouldBecomeVisible) {
      autocompleteRef.current?.setState({ listVisible: shouldBecomeVisible });
    }
  }, [data?.length]);

how to use it? Can you show code ex? please?

[artyorsh]

@Rizayev https://snack.expo.io/elAoHThIT