Toolbar 'Show more items' button is focused after clicking a button from it

[Dumluregn]

📝 Provide detailed reproduction steps (if any)

1. Open full features demo http://localhost:8125/ckeditor5/tests/manual/all-features.html
2. Reduce the width of the editor so that some buttons are grouped.
3. Click a button that should move the focus to the editable (e.g. choose language) from the collapsed part of toolbar.

✔️ Expected result

Focus is moved to the editable.

❌ Actual result

Focus is moved to the "Show more items" toolbar button.

❓ Possible solution

It is a regression introduced in #12162. Due to moving the focus when any dropdown is closed, it also affects the toolbar dropdown which is closed after the button's command is executed, so it focuses the toolbar back.

The problem occurs on every type of button - generic one, dropdown and splitbutton.

📃 Other details

• Browser: any
• OS: any
• First affected CKEditor version: Ck/12125 dropdown focus #12162 - ck/12125-dropdown-focus branch
• Installed CKEditor plugins: toolbar

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Dumluregn]

A cheap and dirty idea could be checking the document.activeElement when dropdown is being closed and don’t focus the button if editable is focused, but I’m not sure if it covers all the cases.

[Reinmar]

Could you make a draft PR with this?

[Dumluregn]

Yes, I'm on it.

[Dumluregn]

PoC: ck/12178-grouped-toolbar-focus. cc @Reinmar @mlewand

[Reinmar]

cc @ckeditor/qa-team – could you verify this idea?

[Mgsy]

@FilipTokarski @Acrophost could you please take a look at it ☝️? Tests should cover:

• Desktop browsers,
• Mobile devices,
• All editor types,
• Different toolbars (the main toolbar, the floating toolbar, the contextual toolbar)

[mlewand]

@Mgsy @FilipTokarski @Acrophost please check whether this issue also solves #12186 - because there's a good chance it does. (in this case please update PR so that it closes both issues)

[Dumluregn]

Most of the issues above seem to be the same as #12207, only the reproduction steps are a bit different (using toolbar buttons) - @FilipTokarski @Acrophost please verify it and hide the proper comments if that's the case.

[FilipTokarski]

Thanks, you're right 👍 I'll leave the one with inserting image, as it looks a bit different because the focus is still in the toolbar.

[Dumluregn]

Yes, the image button doesn't focus the editable - https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageupload/imageuploadui.js#L57-L63. I think it will be worth an actual issue.

[Acrophost]

In addition to the image button issue - in case where we are using a balloon toolbar, the toolbar hides after inserting an image, but the image is not getting selected (we're losing selection overall)

no.toolbar.no.selection.2022-08-4.o.16.46.45.mov

[Acrophost]

I've tested the fix on different browsers, devices and editor types - for now I don't see any more issues with focus aside from ones that are already reported.

[Dumluregn]

Thanks QA, I'll create a PR with the fix.

[mlewand]

The #12178 (comment) should be fixed by #12229 (on the latest master).