Octane, trying to set the focus to an OK button on a 'modal' dialog

When my component receives an authentication error, I want to display an error to the user.

This part works. I ALSO want to set the focus to the OK button. This part does NOT work.

Looking for answers show a lot of outdated ember versions (I’m using 5.4) that I don’t know how to apply. I assume there’s a quick and easy answer, but I don’t know what it is.

showAuthenticationError() {
    this.hasAuthenticationError = true
    let okbutton = this.element.querySelector('#login-page-error-OK-button')
    okbutton.foucus()
}

{{#if this.hasAuthenticationError}}
<Bui::FormAlert
        @type="error" @isModal={{true}} @subject="Authentication Failed!"
        @on-click-away={{this.clearAuthenticationError}}>
    <p class="text-sm">The user name you provided is not valid, or the associated account is inactive, or the entered password is incorrect.</p>
    <p class="text-sm">Please try again.</p>
    <div class="flex justify-center mt-2">
        <button id="login-page-error-OK-button" type="button" {{on "click" this.clearAuthenticationError}}
                class="bg-gray-100 w-1/2 py-2 px-2 shadow outline-none focus:bg-gray-300 hover:bg-gray-300">OK</button>
    </div>
</Bui::FormAlert>
{{/if}}

8 posts - 2 participants

Read full topic