autoFocus does not work on mobile( device: IOS, browser: chrome, safari)

tungtran-zb commented 1 year ago

Expected Behavior

autoFocus does not work on mobile( device: IOS, browser: chrome, safari)
It works on desktop device

(it changes color but doesn't really focus)

Current Behavior

I use react and MUI(Material UI)
When I open Modal(Dialog) and wait for VGS Collect load fields
After load fields successful, it does not focus to first field(with autoFocus: true)

Possible Solution

Steps to Reproduce (for bugs)

Context

User need to click first field after vgs collect load

Your Environment

Version used: 2.19
Browser Name and version: Safari, Chrome
Operating System and version (desktop or mobile): IOS
Link to your project:

tempForm.field('#cc-cvv2', { type: 'card-security-code', name: CVV_FIELD_NAME, maxLength: 3, validations: ['required', 'validCardSecurityCode'], css: VGSInputCSS, classes, autoFocus: true, autoComplete: 'off', inputMode: 'numeric' });

flor-master commented 1 year ago

Hi, thanks for the feedback, but it's a known issue. Unfortunately, you can't implement autofocus for mobile without user actions, because when you focus input automatically - the mobile's OS opens a keyboard, it's a terrible user experience. that's why autofocus was blocked from iOS 13+

https://www.verygoodsecurity.com/docs/vgs-collect/js/faq#field-focus-method-on-i-os https://caniuse.com/autofocus

tungtran-zb commented 1 year ago

Hi, thanks for the feedback, but it's a known issue. Unfortunately, you can't implement autofocus for mobile without user actions, because when you focus input automatically - the mobile's OS opens a keyboard, it's a terrible user experience. that's why autofocus was blocked from iOS 13+

https://www.verygoodsecurity.com/docs/vgs-collect/js/faq#field-focus-method-on-i-os https://caniuse.com/autofocus

Thank you for letting me know that.

verygoodsecurity / vgs-collect-js