CODEWITHSUNDEEP
azure-ad-b2c
Mat
Mat

Reputation: 579

Azure AD B2C Sign-Up HTML Autofocus

I am using custom policies for our sign-up/sign-in etc user flows. When navigating to the sign-up form in Chrome & Edge, the form displays scrolled part-way down the screen. I believe this is because the lowest input field (a check-box) has an autofocus attribute, i.e.:

<input name="xxx" id="xxx" autofocus="" type="checkbox" value="True" />

I can verify that the lowest input (the checkbox) has focus as when I press the space-bar, it toggles.

It appears that Microsoft's javascript in the page is dynamically setting this autofocus attribute. Searching through the javascript it looks like every input has an AUTOFOCUS=True property:

{ "USER_INPUT_TYPE": "CheckboxMultiSelect", "IS_TEXT": false, "IS_EMAIL": false, ... "OPTIONS": [{ "DISP": "I agree.", "VAL": "True", "PRESEL": false, -->> "AUTOFOCUS": true <<-- } ] }

Is there any way to change this autofocus behaviour? Currently it is very annoying as it means that Chrome users see the bottom half of the form when the page loads.

Upvotes: 6

Views: 986

Answers (1)

Madison Courto
Madison Courto

Reputation: 1277

I think this is essentially answered as JavaScript is now available for use on custom pages.

https://azure.microsoft.com/en-au/resources/samples/active-directory-b2c-javascript-msal-singlepageapp/

I'd suggest using JQuery to deselect the input element or remove the tab index value after rendering, but there are a myriad of options now available.

Upvotes: 1

Related Questions