search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.33k stars 953 forks source link

Autocomplete has 3 problems : 2 steps of unfocusing, placement prop render problem and accesory prop not working #1025

Closed MysteriousOrange closed 4 years ago

MysteriousOrange commented 4 years ago

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

  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)

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

adechassey commented 4 years ago

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 commented 4 years ago

@AntoinedeChassey solved in v5 stable

adechassey commented 4 years ago

@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 commented 4 years ago

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.

AlexBatorykLeliw commented 3 years ago

Is there any solution to the double click issue? I notice that ScrollView and FlatList (which is List is under the hood) has a keyboardShouldPersistTaps which has the behaviour to solve this