React-native-ui-kitten: Autocomplete has 3 problems : 2 steps of unfocusing, placement prop render problem and accesory prop not working

[MysteriousOrange]

Hello !
I'm not sure it is a bug, maybe I made a mistake on my side, so I post it as a question :

• Autocomplete has 2 steps of focusing : I have my data prop filled in, when I type text, it correctly display "title" items of data. But when I click anywhere else on the screen, only the list hide, then I have to press again somewhere else to unfocus the Autocomplete Input. It's a problem in the following case :

1. The user has typed some text and has a list displayed.
2. The user press anywhere else on the screen to unfocus or do another action (only the list hide, the input is still focused)
3. Now, no matter what the user type in Autocomplete or how much time he press on Autocomplete, the list won't be displayed again until the user unfocus first the Autocomplete Input by clicking away then focus it again by clicking it again. Only then the list will display.

It tried many things, like a TouchableWithoutFeedback that uses the hide and/or blur method of Autocomplete. Or using onBlur prop of Autocomplete, but both of them only triggers after the 2nd press (1rst hide the list, second unfocus the Autocomplete Input).

EDIT : Also, when the keyboard is still displayed, the user have to press 2 times to choose an item from the list (first it hides the keyboard, then the second one triggers onSelect prop)

• I wanted to configure "placeholder" prop of Autocomplete on "top" to avoid any conflict with the keyboard but there is a render problem : For a very short period of time, I can see the list being displayed on the bottom of the Autocomplete Input, then, it moves to the top. It does a really unpleasant display flickering.

• accessoryLeft and accessoryRight do not display anything. As usual, I followed the documentation and tried many things like :
  accessoryLeft={SearchIcon} (SearchIcon is an Icon imported from another file, it works as an icon prop in button and it's working in my app)
  accessoryRight={this.renderCloseIcon} (Used the same code as in the Autocomplete example, tried many variations in "renderCloseIcon", wrapping the TouchableWithoutFeedback in return () for example, still it doesn't work)

Are these known errors or things caused by a bad configuration on my side ?
Thank you for any help you can provide ! :)
In case of : my phone I am using is a OnePlus 6T

UI Kitten and Eva version

"@eva-design/eva": "^1.4.0",
"@ui-kitten/components": "^4.4.1",
"@ui-kitten/eva-icons": "^4.4.1",
"expo": "~36.0.0",

[addic]

First of all, I have just developed an app with UI Kitten and can confirm that the Autocomplete Component is far behind perfect. You can also see most of the issues you mentioned on the UI Kitten Tricks demo app, hence, it is probably not the way you set things up that is the problem.

I think the 5.0.0 Autocomplete will have improvements on these things, but for now you don't have any good options. I personally made some alterations to the Autocomplete component file to temporarily fix those issues.

* accessoryLeft and accessoryRight do not display anything. As usual, I followed the documentation and tried many things like :
  accessoryLeft={SearchIcon} (SearchIcon is an Icon imported from another file, it works as an icon prop in button and it's working in my app)
  accessoryRight={this.renderCloseIcon} (Used the same code as in the Autocomplete example, tried many variations in "renderCloseIcon", wrapping the TouchableWithoutFeedback in return () for example, still it doesn't work)

I believe you are looking at the 5.0.0-alpha.x docs. Version 4 does not support accessories: https://akveo.github.io/react-native-ui-kitten/docs/4.x/#autocomplete. I have made a similar mistake a few times when I was unable to access docs for a previous version and the newest version was not yet released (there is something messed up with the docs versioning).

[artyorsh]

Autocomplete has 2 steps of focusing

I've got this resolved in #e6e2325, it will be included in 4.4.2, as well as in 5.0.0-alpha.2

Also, when the keyboard is still displayed, the user have to press 2 times

This is a default behavior in RN when working with focused elements 🤷‍♂️

I wanted to configure "placeholder" prop of Autocomplete on "top"

placement I guess. Will take a look on that issue, thanks for reporting

accessoryLeft and accessoryRight do not display anything.

make sure to use the correct documentation version as @addic suggested

[MysteriousOrange]

I've got this resolved in #e6e2325, it will be included in 4.4.2, as well as in 5.0.0-alpha.2

Great ! I'll check it when the new version will be available 😀

This is a default behavior in RN when working with focused elements 🤷‍♂️

Oh, okay I understand

placement I guess. Will take a look on that issue, thanks for reporting

Yes, placement, it was 03:00 AM when I typed my text, I can see many mistakes, sorry for that 😆

make sure to use the correct documentation version as @addic suggested

Okay, I'll pay attention to this !

Thanks to both of you for your answers 🙂

[wizawuza]

Not ideal and it makes some glitchy UI, but for the time being to fix the "2 steps of focusing" in 5.0.0-alpha.1, I have the following in my "onChangeText" function:

autocompleteRef.current.blur();
autocompleteRef.current.focus();

[artyorsh]

@wizawuza I'm wondering how it can work with onChangeText. May be just calling hide within onSelect?

[AntoinedeChassey]

Having the same issue. Can't get the Autocomplete to show the data list.
@wizawuza 's solution is very glitchy as he says as it causes needless rerenderings but at least it shows up the list for now :)

[artyorsh]

@AntoinedeChassey solved in v5 stable

[AntoinedeChassey]

@artyorsh my bad... I was on v5 stable but was calling .show() before setting the data... :sweat_smile:
Works like a charm now. Thanks!

[arafatzahan]

Also, when the keyboard is still displayed, the user have to press 2 times

Is there any way to fix this? It results in very confusing UI.

Also, was there any 4.4.2 update? I have a very large project and I'm not ready to migrate to 5 yet.