Autocomplete for SMS OTP

[zawislak-pawel]

Describe the bug

We would like to integrate autocomplete field in OKTA widget.
To do this we need to add autocomplete="one-time-code" attribute to HTML input.
Currently we use classicEngine (config.useClassicEngine = true;) widget and I couldn't make it work.

I was trying to play with feature: features.disableAutocomplete.

Also I was trying to add hook to afterRender via code:

const oktaSignIn = new OktaSignIn(config);
oktaSignIn.on('afterRender', afterRender);
oktaSignIn.on('afterError', redirectToLoginPage);

function afterRender() {
    const otpInput = document.querySelector('.o-form-input-name-answer > input');
    if (otpInput) {
        otpInput.setAttribute('autocomplete', 'one-time-code');
    }
}

Unfortunately above solutions doesn't seem to work.
afterRender - solution seems to work (not override) for totp app, but for sms it setsautocomplete="off" - my assumption is that react for some reason recreates input element.

Reproduction Steps

Set afterRenderer function to override attribute autocomplete.

SDK Versions

7.12.2

Additional Information

No response

[shuowu-okta]

@zawislak-pawel If you are using classicEngine, afterRender hook should be able to update the auto-complete attribute in input field. Seems like the selector you are using is not for sms code, try with the following snippet

const otpInput = document.querySelector('.o-form-input-name-passCode > input');
if (otpInput) {
    otpInput.setAttribute('autocomplete', 'one-time-code');
}