How to prevent disabling username text box when IDP discovery turned on for Okta SignIn Widget

[tparikh]

My organization uses an Okta-SignIn Widget Log-in page for one of our applications. If we have idp on then login page looks like below

When user enter an email/username and click on “next” button then It simply pre-populates the textbox with the username but does not prevent it from being changed or edited.
Refer below screenshot -

This makes it impossible for users who may need to update/correct the email or username.

So Is there a setting to alter the behavior of the username/email field so that it doesn’t disable the Email Input?

Thanks

[andrea]

There isn’t a way to do this out-of-the-box. When the user enters in their username, the widget is, in the background, checking their IdP (based on routing rules). If they changed their username here, this call would need occur again to ensure that user is at the right IdP. It may be difficult to modify the widget to allow this field to be editable while also ensuring that the right routing rule is applied

[tparikh]

@andrea
Thanks for the response.
I have got the trick, we can do the same by using afterRender. Like this -

widget.on('afterRender', function (context: any) {
      if (context.controller === 'primary-auth') {
        const emailInput = document.getElementById('okta-signin-username')
        const emailInputWrapper = document.querySelector(
          '.o-form-input-name-username'
        ) 
        emailInput.removeAttribute('disabled')
        emailInputWrapper.classList.remove('o-form-disabled')
      }
    })

By enabling the email/user input, if user re-enter an email/username, the idp call doesnt trigger again.
I assume an idp call only happens if context.controller === “idp-discovery” phase means when password field is not present on screen.

Let us know your thoughts, if this is a right approach to enable the email input and there is no side effects on idp usecase flow?

Thanks