[5.x]: New entry flyouts trap focus inside the sidebar

[MoritzLost]

What happened?

Description

When creating an entry from an entry model, the flyout sets the focus on the slug field, and it's impossible to focus the main field layout. See the following video:

https://github.com/craftcms/cms/assets/10146880/1ebaa909-20f4-4303-b5dc-7e0cb87e4a96

Steps to reproduce

1. On an entries field, open the entry selection modal and then click on a new entry from there.

Expected behavior

1. I would expect the initial focus to be on the title field, not the slug. Most of the time, I want to quickly enter a title and then hit CMD + S to exit out of the modal window.
2. For accessibility, it's also problematic that there's no way to reach the main field layout. Focus should start on the title tabbing should take me to all the main entry fields, then continue in the sidebar.

Actual behavior

Focus starts out on the slug and there's no way to reach the title field through keyboard navigation.

Craft CMS version

5.2.5

PHP version

8.3

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

-

[brandonkelly]

I’m not able to reproduce the initial focus bug. What browser are you using?

[MoritzLost]

@brandonkelly Firefox, but I'm also seeing the error in Chrome and Safari. I checked again – looks like the focus starts out on the title (I can see the focus outline for a brief moment when the flyout opens), but then immediately switches to the slug. On inspection, the input for the title field has the autofocus attribute while the slug does not, so looks like JavaScript is switching the focus?

It's still happening in safe mode, so likely not related to a plugin or config.

[brandonkelly]

Is this the native Title field, or a custom field?

[MoritzLost]

@brandonkelly The native title field!

[brandonkelly]

Fixed the focus trap bug for the next Craft 4 and 5 releases. Still not able to reproduce the focus jumping bug though.

It could maybe stem from changes in #15252, but I don’t see how. Can you try rolling back to Craft 5.2.3 and see the bug still exists there?

[MoritzLost]

@brandonkelly Still happening in 5.2.3 🤔 Cleared cache and cpresources, the focus still jumps from the title to the slug. Also tried with several different entry types (one with only the title field, one with title and one dropdown field, and one with a bunch of fields) – I'm seeing the same issue with all entry types.

Anything else I can try to narrow it down?

[brandonkelly]

Craft 4.10.5 and 5.2.6 are out now with the focus trap fix.

No one on the team has been able to reproduce the focus jumping bug, though. Any chance you can send Composer files and a database backup into support@craftcms.com?

[MoritzLost]

@brandonkelly Done! Hope this helps, let me know if you need any more information.

Curious that nobody can reproduce this, this is happening in both of my current Craft 5 projects. Though they're both based on the same boilerplate, so the same config. Maybe something in our config is somehow broken from a previous version?

[brandonkelly]

Thanks for sending that in! We were able to reproduce with your files. Turns out the bug was triggered by the tooltip shown on the Author field, for users with long usernames/emails.

Fixed for the next release!

[MoritzLost]

@brandonkelly Crazy 🤯

I just tested again (still on the previous version); I added a short username that doesn't overflow in the sidebar on my account. Still, the focus jumps from the title field to the Show Sidebar button on the top right. Is this the intended behaviour? Shouldn't the focus stay on the title field?

[brandonkelly]

@MoritzLost Can you test the 5.x branch?

"craftcms/cms": "5.x-dev as 5.2.6",

[MoritzLost]

@brandonkelly Still seeing this issue on the latest 5.x branch, unfortunately:

https://github.com/user-attachments/assets/ac249255-94ae-4ad5-a04e-d3b6a9b1c54e

The focus starts out on the title but immediately jumps to the button on the top right.

The only changes I made since sending in the database dump:

• Added a username (Moritz), previously it was empty, so it showed my email.
• Updated to 5.x-dev

[brandonkelly]

Thanks! I was able to reproduce when creating a new entry via an entry selection modal like that. (I ended up being able to reproduce the previous bug when editing existing entry slideouts, so didn’t think to double-check that the fix worked when creating new entries.) Fixed now.

[brandonkelly]

Craft 4.10.6 and 5.2.7 are out now with that fix. Thanks for bearing with me!

[MoritzLost]

@brandonkelly Awesome, thanks! Just updated to 5.2.7, it's working perfectly now 👍