Fix default drag & drop helper did not work well with webcomponents

It doesn't let us do async, so was not waiting for widgets to be updated

api/js/egw_action/egwDragActionImplementation.ts

@@ -44,12 +44,47 @@ export class EgwDragActionImplementation implements EgwActionImplementation {
         const pseudoNumRows = (_selected[0]?._context?._selectionMgr?._selectAll) ?
             _selected[0]._context?._selectionMgr?._total : _selected.length;
 
-        for (const egwActionObject of _selected) {
-            const row: Node = (egwActionObject.iface.getDOMNode()).cloneNode(true);
-            if (row) {
-                rows.push(row);
-                table.append(row);
-            }
+		// Clone nodes but use copy webComponent properties
+		const carefulClone = (node) =>
+		{
+			// Don't clone text nodes, it causes duplication in et2-description
+			if(node.nodeType == node.TEXT_NODE)
+			{
+				return;
+			}
+
+			let clone = node.cloneNode();
+
+			let widget_class = window.customElements.get(clone.localName);
+			let properties = widget_class ? widget_class.properties : [];
+			for(let key in properties)
+			{
+				clone[key] = node[key];
+			}
+			// Children
+			node.childNodes.forEach(c =>
+			{
+				const child = carefulClone(c)
+				if(child)
+				{
+					clone.appendChild(child);
+				}
+			})
+			if(widget_class)
+			{
+				clone.requestUpdate();
+			}
+			return clone;
+		}
+
+		for(const egwActionObject of _selected)
+		{
+			const row : Node = carefulClone(egwActionObject.iface.getDOMNode());
+			if(row)
+			{
+				rows.push(row);
+				table.append(row);
+			}
             index++;
             if (index == maxRows) {
                 // Label to show number of items
@@ -195,9 +230,33 @@ export class EgwDragActionImplementation implements EgwActionImplementation {
 
                 event.dataTransfer.setData('application/json', JSON.stringify(data))
 
-                event.dataTransfer.setDragImage(ai.helper, 12, 12);
-
-                this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected));
+				// Wait for any webComponents to finish
+				let wait = [];
+				const webComponents = [];
+				const check = (element) =>
+				{
+					if(typeof element.updateComplete !== "undefined")
+					{
+						webComponents.push(element)
+						element.requestUpdate();
+						wait.push(element.updateComplete);
+					}
+					element.childNodes.forEach(child => check(child));
+				}
+				check(ai.helper);
+				// Clumsily force widget update, since we can't do it async
+				Promise.all(wait).then(() =>
+				{
+					wait = [];
+					webComponents.forEach(e => wait.push(e.updateComplete));
+					Promise.all(wait).then(() =>
+					{
+						event.dataTransfer.setDragImage(ai.helper, 12, 12);
+						debugger;
+					});
+				});
+
+				this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected));
             };
 
             const dragend = (_) => {

api/templates/default/etemplate2.css

@@ -3469,6 +3469,7 @@ div.et2_image_tooltipPopup {
 div.et2_egw_action_ddHelper {
     z-index: -100;
     position: relative;
+	max-width: fit-content;
 }
 
 /* The last div which shows Ctrl tip to user*/
@@ -3489,17 +3490,18 @@ div.et2_egw_action_ddHelper table.et2_egw_action_ddHelper_row {
     background-color: rgba(255, 194, 0, 0.70);
     box-shadow: 6px 6px 8px gray;
     border: 1px solid black;
+	max-width: 400px;
 }
 
 table.et2_egw_action_ddHelper_row tr {
     background: none;
     max-height: 20px;
 }
 
-/* Apply to all displaied rows in order to get same result*/
-table.et2_egw_action_ddHelper_row * {
+/* Apply to all displayed rows in order to get same result*/
+table.et2_egw_action_ddHelper_row > *, table.et2_egw_action_ddHelper_row .innerContainer {
     white-space: nowrap !important;
-    max-height: 15px;
+	max-height: 2em;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 400px;