Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbar dropdowns should hide when they lose focus #12005

Closed
mlewand opened this issue Jul 1, 2022 · 0 comments · Fixed by #12319
Closed

Toolbar dropdowns should hide when they lose focus #12005

mlewand opened this issue Jul 1, 2022 · 0 comments · Fixed by #12319
Assignees
Labels
domain:accessibility This issue reports an accessibility problem. domain:ui/ux This issue reports a problem related to UI or UX. package:ui squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.

Comments

@mlewand
Copy link
Contributor

mlewand commented Jul 1, 2022

📝 Provide detailed reproduction steps (if any)

This is a followup task that should only be done after #11838 is implemented.

Currently we don't hide dropdown panels when we focus out from their panels. This leads to weird situations like that:

image

There are numerous ways how you can reproduce this. With the latest release:

  1. Open https://ckeditor.com/docs/ckeditor5/34.2.0/examples/builds/document-editor.html
  2. Put the focus inside of the editor ediable.
  3. Use alt + f10 to focus the toolbar.
  4. Press space to open heading dropdown.
  5. Press down arrow to make sure that the focus goes inside of a dropdown.
  6. Press tab to move the focus back to editable.

✔️ Expected result

Dropdown is hiden.

❌ Actual result

It remains open.

image

📃 Other details

There are many other ways to move focus out of dropdown after we open it. For example in browser you can use builtin search function to move focus to any place on the page.


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

@mlewand mlewand added type:bug This issue reports a buggy (incorrect) behavior. package:ui domain:ui/ux This issue reports a problem related to UI or UX. domain:accessibility This issue reports an accessibility problem. labels Jul 1, 2022
Dumluregn added a commit that referenced this issue Sep 1, 2022
…s-v2

Fix (ui): DropdownView should close when it gets blurred. Also, DropdownView should focus its #buttonView only when it gets closed and the focus was inside its panelView. Closes #12178. Closes #12005.
Fix (media-embed): The focus will move to the editor after inserting a media. Closes #12186.
@Dumluregn Dumluregn added the squad:features Issue to be handled by the Features team. label Sep 1, 2022
@CKEditorBot CKEditorBot added this to the iteration 57 milestone Sep 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:accessibility This issue reports an accessibility problem. domain:ui/ux This issue reports a problem related to UI or UX. package:ui squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
4 participants