@brightspace-ui/core 2.118.2 → 2.118.3

package/components/list/list-item-drag-drop-mixin.js

@@ -381,7 +381,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_dispatchListItemsMove(sourceItems, targetItem, moveLocation, keyboardActive) {
 		if (!keyboardActive) keyboardActive = false;
-		const rootList = this._getRootList();
+		const rootList = this.getRootList();
 		/** @ignore */
 		rootList.dispatchEvent(new CustomEvent('d2l-list-items-move', {
 			detail: {
@@ -408,13 +408,13 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_dispatchMoveListItemFirst(moveToRoot) {
-		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const list = (moveToRoot ? this.getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
 		const items = list.getItems();
 		this._dispatchListItemsMove([this], items[0], moveLocations.above, true);
 	}
 
 	_dispatchMoveListItemLast(moveToRoot) {
-		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const list = (moveToRoot ? this.getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
 		const items = list.getItems();
 		this._dispatchListItemsMove([this], items[items.length - 1], moveLocations.below, true);
 	}
@@ -483,7 +483,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_dispatchMoveRootItem(moveAbove) {
-		const rootList = this._getRootList();
+		const rootList = this.getRootList();
 		const items = rootList.getItems();
 		const currentIndex = items.indexOf(this);
 		if (moveAbove && currentIndex !== 0) {
@@ -610,7 +610,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			return dragImage;
 		};
 
-		const rootList = this._getRootList(this);
+		const rootList = this.getRootList(this);
 		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
 		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
 			const lazyLoadListItems = this._getFlattenedListItems().lazyLoadListItems;
@@ -750,8 +750,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		}
 
 		// assert that both the source and target are from the same list - may allow this in the future
-		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0]._getRootList();
-		if (this._getRootList() !== targetRoot) return;
+		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0].getRootList();
+		if (this.getRootList() !== targetRoot) return;
 
 		dragState.addDropTarget(this);
 		this._draggingOver = true;

package/components/list/list-item-generic-layout.js

@@ -283,7 +283,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	_focusNextRow(previous = false, num = 1) {
 
-		let listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+		const curListItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+		let listItem = curListItem;
 
 		while (num > 0) {
 			const tempListItem = (previous ? this._getPreviousFlattenedListItem(listItem) : this._getNextFlattenedListItem(listItem));
@@ -301,7 +302,9 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			if (!listItem._tryFocus()) {
 				// ultimate fallback to generic method for getting next/previous focusable
 				const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
-				if (nextFocusable) nextFocusable.focus();
+				if (nextFocusable && this._isContainedInSameRootList(curListItem, nextFocusable)) {
+					nextFocusable.focus();
+				}
 			}
 		}
 
@@ -442,9 +445,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
 	}
 
+	_isContainedInSameRootList(item, node) {
+		const rootList = item?.getRootList?.(item);
+		return isComposedAncestor(rootList, node);
+	}
+
 	_onKeydown(event) {
 		if (!this.gridActive) return;
-
 		let node = null;
 		let preventDefault = true;
 		switch (event.keyCode) {

package/components/list/list-item-mixin.js

@@ -440,6 +440,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._tryFocus();
 	}
 
+	getRootList(node) {
+		if (!node) node = this;
+		let rootList;
+		while (node) {
+			if (node.tagName === 'D2L-LIST') rootList = node;
+			node = getComposedParent(node);
+		}
+		return rootList;
+	}
+
 	async highlight() {
 		if (this._highlight) return;
 		const elem = this.shadowRoot.querySelector('[slot="outside-control-container"]');
@@ -487,7 +497,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 	_getListItems(listItems, lazyLoadListItems, listItem) {
 		if (!listItem) {
-			const rootList = this._getRootList();
+			const rootList = this.getRootList();
 			const rootListItems = rootList.getItems();
 			rootListItems.forEach(listItem => this._getListItems(listItems, lazyLoadListItems, listItem));
 		} else {
@@ -544,16 +554,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		}
 	}
 
-	_getRootList(node) {
-		if (!node) node = this;
-		let rootList;
-		while (node) {
-			if (node.tagName === 'D2L-LIST') rootList = node;
-			node = getComposedParent(node);
-		}
-		return rootList;
-	}
-
 	_isListItem(node) {
 		if (!node) node = this;
 		return node.role === 'rowgroup' || node.role === 'listitem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.118.2",
+  "version": "2.118.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",