[5.x]: 2FA setup screen looks like there's an overlay

[bartrylant]

What happened?

Description

When a new users is activating his account and wants (needs) to setup 2fa, it looks like there is an overlay on top of the whole page. The user cannot enter anything because as soon as you click anywhere on the page (blueish overlay), the slideout for 2fa disappears.

Steps to reproduce

1. Make a new user
2. Click the activation link in the email
3. Choose a password
4. Click the button to setup 2fa

Expected behavior

Being able to enter the code.

Actual behavior

Overlay on top of the whole page.

Craft CMS version

5.6.10.2

PHP version

8.4.3

Operating system and version

Linux 6.8.0-54-generic

Database type and version

MySQL 8.4.4

Image driver and version

No response

Installed plugins and versions

[i-just]

Hi, thanks for reaching out. I’m not able to reproduce that. What OS/browser are you seeing this in?

[bartrylant]

MacOS with Chrome

[i-just]

Thanks! Are there any errors in the console?

[bartrylant]

No errors in the console. It works perfectly in Safari.

[brianjhanson]

I'm also not able to reproduce this unfortunately. What's the exact version of Chrome you're using? Do you still see the issue with safeMode enabled?

[belkin]

I've found a way to consistently reproduce this issue, even with safeMode enabled.

Chrome version: 135.0.7049.96 macOS: 15.4.1 (latest) Craft CMS: 5.7.1.1

Note: Two-Factor Authentication setup works correctly in Safari.

Steps to Reproduce

1. On the Two-Step Verification Setup screen, click the Set up button:

2. Enter your password to verify your identity:

3. Submit the password form:

3.1 ✅ Clicking the button loads the expected 2FA setup slide-out:

3.2 ❌ Pressing Enter on the form results in a broken overlay:

[brandonkelly]

@belkin I can’t reproduce that on my end. Tested on the same versions – macOS 15.4.1, Chrome 135.0.7049.96, and Craft 5.7.1.1.

Are you pressing Return immediately when the slideout is opened, tabbing within it at all?

I did notice that rapidly pressing Return when submitting the elevated session modal could result in two slideouts opening simultaneously, and fixed that for the next release. (7008638b8a8d58d3ba01504d8550e11fcc6cda22)

[belkin]

@brandonkelly I was originally pressing Return just once to submit the form.

After testing in Incognito mode with all extensions disabled (only Bitwarden was allowed in Incognito mode), I discovered that the issue appears to be caused by the extension.

With Bitwarden disabled, the form submission works correctly — both when clicking the submit button and when pressing Return.

I'm not sure if it's the same case with @bartrylant.