expo / react-native-action-sheet

A cross-platform ActionSheet for React Native
MIT License
1.41k stars 226 forks source link

[Android] Actionsheet requires two taps when used in conjunction with focused inputs #240

Open raldred opened 3 years ago

raldred commented 3 years ago

When opening an action sheet with an input focused, selecting an option requires two taps, regardless of autoFocus setting. I wonder if we need something here like React Native's ScrollView's keyboardshouldpersisttaps option so that tapping on the actionsheet does not interact with the keyboard or input.

The only way I have managed to mitigate this is by blurring the input myself before calling showActionSheetWithOptions But it makes the UX a bit janky as the interface jumps around.

Without input being focused

  1. Open actionsheet
  2. First tap, selects the option

https://user-images.githubusercontent.com/37096/133111483-33dca967-04d2-4ac6-aa63-5da60da0c130.mov

With Input focused - autoFocus: false

  1. Open actionsheet, input still focused
  2. First tap, blurs input and closes keyboard
  3. Second tap, selects the option

https://user-images.githubusercontent.com/37096/133111107-dc71cf11-b701-4762-938a-c0dc7781704d.mov

With Input focused - `autoFocus: true

  1. Open actionsheet: Nasty jump as auto focus causes the input to blur, closing the keyboard.
  2. First tap, does nothing
  3. Second tap, selects the option

https://user-images.githubusercontent.com/37096/133111599-250af9fe-4729-48c2-8972-ea5229d93b39.mov

`

bradbyte commented 3 years ago

@raldred Thanks Ron, can you confirm the behavior on iOS? Does it also close the input?

raldred commented 3 years ago

@bradbyte The iOS implementation seems a little more integrated with the keyboard. It closes the keyboard, upon selecting or cancelling, the focus to the input is returned/retained.

https://user-images.githubusercontent.com/37096/133115245-fe253246-0087-49f1-92ed-5b8e24df07b9.mov

marcshilling commented 1 year ago

Having this issue as well...Android only. Similarly, I'm resorting to calling Keyboard.dismiss() prior to showing the sheet.