Modal gets separated from field if there is a keyboard dismissed animation

[reddo]

If there is a TextInput focused with the keyboard visible, tapping on the dropdown dismisses the keyboard and the window scrolls, the modal gets separated from the dropdown.

See this screen recording:

Note that there's a few seconds pause in the video, just watch till the end.

[abartolo]

@reddo Thanks for the video. This is also happening to me. Any luck finding a workaround?

[reddo]

@abartolo nope, still an issue

[matteodanelli]

I have the same issue. Anyone solved?

[ryachza]

I patched this adding:

  componentWillMount()
  {
    const handler = (e) => { if(this.state.modal){ this.onPress(null) } }
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',handler)
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',handler)
  }

Seems to be working for me. I would probably like to see the position measurements separated from the animation and only trigger the former.

Full diff: react-native-material-dropdown+0.11.1.patch.zip

[matteodanelli]

@ryachza Yes! It seems work. Pull request made ;)

[abartolo]

@n4kz Hi, any idea when the PR from @matteodanelli might get accepted?

[yasir-netlinks]

Hi there, any solution for this! Can we keep the keyboard open when clicked on dropdown rather than dismissing the keyboard ??

[damithg-dev]

hi is there any fixes regarding this, I have used the patch but not any luck,

[HadisSharif]

I have the same issue.

[FlorianMerkle]

@ryachza this works for me on iOS but not on android. It seems that the 'keyboardDidHide' event fires too early on Android. Logging the x and y values measured in the onPress function shows the difference between the platforms.

Setting a timeout leads to equal values for iOS and Android (and the expected behavior):

const handler = (e) => { if(this.state.modal){ setTimeout(() => { this.onPress(null) }, 10); } }

Maybe someone can explain the difference in the keyboard event handlers in iOS and Android?