search

stesvis / ReactNativeDemo

0 stars 0 forks source link

Fix AutoComplete component #3

Open stesvis opened 2 years ago

stesvis commented 2 years ago

I built a custom AutoComplete component, but it works differently in Android and iOS.

Expected behavior

  1. You start typing text: the dropdown shows you the matching items
  2. You click on one item: the text is selected and it hides the dropdown
  3. While the dropdown is open, you click outside: it should hide the dropdown

Actual Behavior

Here's the issues that need to be fixed in both platforms.

Android

  1. OK
  2. It hides the dropdown but the item is not selected
  3. OK

iOS

  1. The dropdown zIndex does not work properly. You can see the content in the screen overlaps (see screenshots)
  2. It does not hide the dropdown but the item is not selected
  3. It does not hide the dropdown

Notes

Screenshots

iOS android

stesvis commented 2 years ago

@mulayam1005 please update this task with comments when you need. I like how it works now, but there is still one part not done: when you click outside of the dropdown it still doesn't hide it. If you don't want to select any of the options you should be able to hide the dropdown by clicking outside.

mulayam1005 commented 2 years ago

Hello Cristian,

Yes This is not working because In component we are only covering the list which we are showing previously it is working because we are using onEndEditing props this is not correct and to close the popup via clicking outside we need to cover the whole screen invisibly and give the touchable to whole view in custom components. So I'm giving a cross icon in input to close the component list but if this is not correct then we have to show the modal or new screen in which we show the components of the list and use touchable behind the list

Thanks

On Tue, May 3, 2022 at 10:20 PM Cristian Merli @.***> wrote:

@mulayam1005 https://github.com/mulayam1005 please update this task with comments when you need. I like how it works now, but there is still one part not done: when you click outside of the dropdown it still doesn't hide it. If you don't want to select any of the options you should be able to hide the dropdown by clicking outside.

— Reply to this email directly, view it on GitHub https://github.com/stesvis/ReactNativeDemo/issues/3#issuecomment-1116324789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEDOH2PZ2HJJKTKSQYZ6HDVIFKO3ANCNFSM5UWZMVQA . You are receiving this because you were mentioned.Message ID: @.***>

stesvis commented 2 years ago

I see thanks. I'll think about it.