feat(ui5-tabcontainer, ui5-list): automatically focus dropped element (#8455)

BGSOFUIRODOPI-3189

Author: dimovpetar

packages/main/src/List.ts

@@ -971,10 +971,11 @@ class List extends UI5Element {
 
 	_ondrop(e: DragEvent) {
 		e.preventDefault();
+		const draggedElement = DragRegistry.getDraggedElement()!;
 
 		this.fireEvent<ListMoveEventDetail>("move", {
 			source: {
-				element: DragRegistry.getDraggedElement()!,
+				element: draggedElement,
 			},
 			destination: {
 				element: this.dropIndicatorDOM!.targetReference!,
@@ -983,6 +984,7 @@ class List extends UI5Element {
 		});
 
 		this.dropIndicatorDOM!.targetReference = null;
+		draggedElement.focus();
 	}
 
 	isForwardElement(element: HTMLElement) {

packages/main/src/TabContainer.ts

@@ -566,10 +566,11 @@ class TabContainer extends UI5Element {
 
 	_onHeaderDrop(e: DragEvent) {
 		e.preventDefault();
+		const draggedElement = DragRegistry.getDraggedElement()!;
 
 		this.fireEvent<TabContainerMoveEventDetail>("move", {
 			source: {
-				element: DragRegistry.getDraggedElement()!,
+				element: draggedElement,
 			},
 			destination: {
 				element: (this.dropIndicatorDOM!.targetReference as Tab).realTabReference,
@@ -578,6 +579,7 @@ class TabContainer extends UI5Element {
 		});
 
 		this.dropIndicatorDOM!.targetReference = null;
+		draggedElement.focus();
 	}
 
 	_onHeaderDragLeave(e: DragEvent) {
@@ -616,12 +618,13 @@ class TabContainer extends UI5Element {
 
 	_onPopoverListMove(e: CustomEvent<ListMoveEventDetail>) {
 		const { destination } = e.detail;
+		const draggedElement = DragRegistry.getDraggedElement()!;
 
 		e.preventDefault();
 
 		this.fireEvent<TabContainerMoveEventDetail>("move", {
 			source: {
-				element: DragRegistry.getDraggedElement()!,
+				element: draggedElement,
 			},
 			destination: {
 				element: (destination.element as Tab).realTabReference,
@@ -630,6 +633,7 @@ class TabContainer extends UI5Element {
 		}, true);
 
 		this.dropIndicatorDOM!.targetReference = null;
+		draggedElement.focus();
 	}
 
 	async _onTabStripClick(e: Event) {

packages/main/test/pages/ListDragAndDrop.html

@@ -82,8 +82,6 @@ <h2>Drag and drop</h2>
 			} else if (destination.placement === "On") {
 				destination.element.prepend(source.element);
 			}
-
-			source.element.focus();
 		};
 
 		list1.addEventListener("ui5-move-over", list1HandleMoveOver);

packages/main/test/pages/TabContainerDragAndDrop.html

@@ -135,8 +135,6 @@ <h2>Drag and drop</h2>
 			} else {
 				source.element.slot = "";
 			}
-
-			source.element.focus();
 		});
 
 		const densityCb = document.getElementById("density");

packages/main/test/specs/List.spec.js

@@ -679,7 +679,7 @@ describe("List drag and drop tests", () => {
 		const results = await Promise.all(expectedItems.map((item, i) => item.isEqual(listItems[i])));
 
 		return results.every(value => value);
-	}
+	};
 
 	before(async () => {
 		await browser.url(`test/pages/ListDragAndDrop.html`);
@@ -691,10 +691,12 @@ describe("List drag and drop tests", () => {
 		let dragOffset = await getDragOffset(firstItem, secondItem, "After");
 		await firstItem.dragAndDrop({ x: 0, y: dragOffset});
 		assert.ok(await compareItemsOrder("listDnd1", [secondItem, firstItem, thirdItem]), "Items order has changed");
+		assert.ok(await firstItem.isFocused(), "Item is focused");
 
 		dragOffset = await getDragOffset(firstItem, thirdItem, "After");
 		await firstItem.dragAndDrop({ x: 0, y: dragOffset});
 		assert.ok(await compareItemsOrder("listDnd1", [secondItem, thirdItem, firstItem]), "Items order has changed");
+		assert.ok(await firstItem.isFocused(), "Item is focused");
 	});
 
 	it("Moving item Before another", async () => {
@@ -714,11 +716,13 @@ describe("List drag and drop tests", () => {
 
 		await firstItem.dragAndDrop({ x: 0, y: 0 });
 		assert.ok(await compareItemsOrder("listDnd2", [firstItem, secondItem, thirdItem]), "Items order has NOT changed");
+		assert.ok(await firstItem.isFocused(), "Item is focused");
 
 		const dragOffset = await getDragOffset(firstItem, secondItem);
 		await firstItem.dragAndDrop({ x: 0, y: dragOffset});
 		assert.ok(await compareItemsOrder("listDnd2", [secondItem, thirdItem]), "Items order has changed");
 		assert.ok(await secondItem.$("[ui5-li]").isEqual(firstItem), "First item is nested in second item");
+		assert.ok(await firstItem.isFocused(), "Item is focused");
 	});
 
 	it("Moving item from one list to another", async () => {
@@ -728,6 +732,7 @@ describe("List drag and drop tests", () => {
 		const dragOffset = await getDragOffset(listTwoItem, listOneFirstItem, "After");
 		await listTwoItem.dragAndDrop({ x: 0, y: dragOffset});
 		assert.ok(await compareItemsOrder("listDnd1", [listOneFirstItem, listTwoItem, listOneSecondItem, listOneThirdItem]), "Items order has changed");
+		assert.ok(await listTwoItem.isFocused(), "Item is focused");
 	});
 
 	it("Moving link to list that doesn't accept it", async () => {