azeezat / react-native-select

A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities. Look is consistent across platforms. Compatible with Expo.
https://azeezat.github.io/react-native-select/
MIT License
97 stars 16 forks source link

Searchable input hidden by keyboard on iOS #51

Closed esorinas closed 4 months ago

esorinas commented 10 months ago

Describe the bug I am trying to implement a searchable select, and struggling with the behavior of the input with respect to the keyboard. In Android, it works perfectly fine, but on iOS the input (and therefore all the options) are hidden under the keyboard.

I am using version 1.3.2 with an iPhone XS Max in an expo-managed project, in case any of this information is relevant.

To Reproduce Steps to reproduce the behavior:

  1. Use a simple <SelectDropdown> (I used the example from the docs)
  2. Add isSearchable={true}
  3. Open the dropdown and start typing in the input
  4. See how input and options are hidden under the keyboard

Expected behavior As happens with Android, I think both the options and the input should move up to still be visible when keyboard is open.

Screenshots I attach two screen recordings, one with Android (OK) and one with iOS (error).

https://github.com/azeezat/react-native-select/assets/43247096/86af6116-12d5-47ee-91d7-fa364e071b5f

https://github.com/azeezat/react-native-select/assets/43247096/6eeb27ae-68f5-4f48-83f6-bebd3947ec35

Smartphone (please complete the following information):

Additional information I created this small repository with the simple usage I mentioned before: https://github.com/esorinas/dropdown_keyboard_bug

billomore commented 5 months ago

hi @azeezat , thanks for a great lib :)

in regards for this issue, I wouldn't classify it as enhancement, as the examples from the official sandbox don't work properly on ios - open the currency select, focus on the search field and see for yourself.

I've added a PR to fix it, would love your feedback :)