Merge pull request #14670 from ckeditor/ck/14364-dropdown-view-should…

…-not-be-closed-on-scrollbar-click Fix (ui): The dropdown view should not be closed when interacting with a scrollbar. Closes #14364.
ckeditor · Jul 26, 2023 · 3af90be · 3af90be
2 parents 5f43cd2 + 1bbe286
commit 3af90be
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
@@ -83,7 +83,7 @@
 		&.ck-off:active,
 		&.ck-on:active {
 			box-shadow: none;
-			
+
 			&:focus {
 				@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 			}
@@ -119,4 +119,8 @@
 	&.ck-dropdown__panel_nw {
 		border-bottom-right-radius: 0;
 	}
+
+	&:focus {
+		outline: none;
+	}
 }
diff --git a/packages/ckeditor5-ui/src/dropdown/dropdownpanelview.ts b/packages/ckeditor5-ui/src/dropdown/dropdownpanelview.ts
@@ -69,7 +69,8 @@ export default class DropdownPanelView extends View implements DropdownPanelFocu
 					'ck-dropdown__panel',
 					bind.to( 'position', value => `ck-dropdown__panel_${ value }` ),
 					bind.if( 'isVisible', 'ck-dropdown__panel-visible' )
-				]
+				],
+				tabindex: '-1'
 			},
 
 			children: this.children,

diff --git a/packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js b/packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js
@@ -38,6 +38,7 @@ describe( 'DropdownPanelView', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-reset' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-dropdown__panel' ) ).to.be.true;
+			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 
 		describe( 'template bindings', () => {