Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard cannot be dismissed for CardForm component #954

Open
JulianErnest opened this issue May 21, 2022 · 5 comments
Open

Keyboard cannot be dismissed for CardForm component #954

JulianErnest opened this issue May 21, 2022 · 5 comments
Labels
question Further information is requested

Comments

@JulianErnest
Copy link

Describe the bug
Keyboard cannot be closed by tapping away from the screen. I've programmatically called Keyboard.dismiss() however this works for other inputs but not for the CardForm inputs.

To Reproduce
Steps to reproduce the behavior:

  1. Add CardField component
  2. Open any of the inputs

Expected behavior
Keyboard should easily be dismissed

Additional context
I've already followed the solution from:
#222
however this does not work for CardForm

@charliecruzan-stripe
Copy link
Collaborator

Is this on Android or iOS? or both?

Filling out the entire bug report template is a huge help to us in debugging the issue

@charliecruzan-stripe charliecruzan-stripe added the question Further information is requested label May 24, 2022
@JulianErnest
Copy link
Author

This is for iOS. It's basically the same issue with #222, however for CardForm that's why I didn't get too detailed about it, apologies.

@jgillick
Copy link
Contributor

jgillick commented Apr 6, 2023

Using StripeContainer only works if I wrap the entire screen. So, I found another ugly workaround. Create a 1x1 text input that you can focus to kill the keyboard. 🙄

const MyComponent = () => {
  const closeKeyboard = useCallback(() => {
    focusInputRef.current.focus();
    Keyboard.dismiss();
    focusInputRef.current.blur();
  }, []);
  
  return (
    <View>
      <CardForm />
      <TextInput
        ref={focusInputRef}
        accessible={false}
        accessibilityElementsHidden={true}
        style={styles.hackFocusInput}
      />
    </View>
  )
}
const styles = {
  hackFocusInput: {
    width: 1,
    height: 1,
    position: 'absolute',
    bottom: 0,
    right: 0,
    opacity: 0,
  },
}

Using<StripeContainer /> also works, but I have to wrap the entire screen with it.

@manishnaruka
Copy link

Same issue here but only with Zipcode. Urgent to fix this.

@parth-myelth
Copy link

keyboardShouldPersistTaps with StripeContainer on screen It's work for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

5 participants