Merge pull request #15434 from ckeditor/ck/15298

Add the missing type for the list view.
ckeditor · Dec 5, 2023 · 9ea94d4 · 9ea94d4
2 parents 0b9552b + f40fa77
commit 9ea94d4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/packages/ckeditor5-ui/src/list/listitemgroupview.ts b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
@@ -10,7 +10,9 @@
 import View from '../view';
 import type ViewCollection from '../viewcollection';
 import ListView from './listview';
+import type ListItemView from './listitemview';
 import LabelView from '../label/labelview';
+import ListSeparatorView from './listseparatorview';
 
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 
@@ -105,11 +107,14 @@ export default class ListItemGroupView extends View {
 	}
 
 	/**
-	 * Focuses the list item.
+	 * Focuses the list item (which is not a separator).
 	 */
 	public focus(): void {
-		if ( this.items.first ) {
-			this.items.first.focus();
+		if ( this.items ) {
+			const firstListItem = this.items.find( item => !( item instanceof ListSeparatorView ) ) as ListItemView | ListItemGroupView;
+			if ( firstListItem ) {
+				firstListItem.focus();
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
@@ -10,8 +10,9 @@
 import View from '../view';
 import FocusCycler from '../focuscycler';
 
-import type ListItemView from './listitemview';
+import ListItemView from './listitemview';
 import ListItemGroupView from './listitemgroupview';
+import type ListSeparatorView from './listseparatorview';
 import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
 import ViewCollection from '../viewcollection';
 
@@ -39,7 +40,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * Collection of the child list views.
 	 */
-	public readonly items: ViewCollection<ListItemView | ListItemGroupView>;
+	public readonly items: ViewCollection<ListItemView | ListItemGroupView | ListSeparatorView>;
 
 	/**
 	 * Tracks information about DOM focus in the list.
@@ -141,7 +142,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 		for ( const item of this.items ) {
 			if ( item instanceof ListItemGroupView ) {
 				this._registerFocusableItemsGroup( item );
-			} else {
+			} else if ( item instanceof ListItemView ) {
 				this._registerFocusableListItem( item );
 			}
 		}

diff --git a/packages/ckeditor5-ui/tests/list/listitemgroupview.js b/packages/ckeditor5-ui/tests/list/listitemgroupview.js
@@ -8,6 +8,7 @@ import ListItemGroupView from '../../src/list/listitemgroupview';
 import ViewCollection from '../../src/viewcollection';
 import { LabelView, View } from '../../src';
 import { Locale } from '@ckeditor/ckeditor5-utils';
+import ListSeparatorView from '../../src/list/listseparatorview';
 
 describe( 'ListItemGroupView', () => {
 	let view, locale;
@@ -161,6 +162,28 @@ describe( 'ListItemGroupView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 
+		it( 'focuses the first view in #items which is not a separator', () => {
+			const childListSeparatorView = new ListSeparatorView();
+			view.items.add( childListSeparatorView );
+
+			const childListItemView = new ListItemView();
+			view.items.add( childListItemView );
+
+			const spyItem = sinon.spy( childListItemView, 'focus' );
+
+			view.focus();
+			sinon.assert.calledOnce( spyItem );
+		} );
+
+		it( 'does not throw if #items include only a separator', () => {
+			expect( () => {
+				const childListSeparatorView = new ListSeparatorView();
+				view.items.add( childListSeparatorView );
+
+				view.focus();
+			} ).to.not.throw();
+		} );
+
 		it( 'does not throw if #items are empty', () => {
 			expect( () => {
 				view.focus();

diff --git a/packages/ckeditor5-ui/tests/list/listview.js b/packages/ckeditor5-ui/tests/list/listview.js
@@ -12,7 +12,7 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../../src/focuscycler';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import View from '../../src/view';
-import { ListItemGroupView } from '../../src';
+import { ListItemGroupView, ListItemView } from '../../src';
 
 describe( 'ListView', () => {
 	let view;
@@ -499,10 +499,9 @@ describe( 'ListView', () => {
 } );
 
 function focusable( name ) {
-	const view = nonFocusable();
+	const view = new ListItemView();
 
 	view.name = name;
-	view.focus = () => {};
 
 	return view;
 }