@descope/web-components-ui 1.0.95 → 1.0.96

package/dist/index.esm.js

@@ -423,6 +423,35 @@ const draggableMixin = (superclass) =>
 			}
 		}
 
+		get #isDraggable() {
+			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
+		}
+
+		init() {
+
+			// because we are delegating the focus from the outer component, 
+			// the D&D is not working well in the page editor
+			// in order to solve it we are making the inner component focusable on mouse down
+			// and removing it on complete
+			this.addEventListener('mousedown', (e) => {
+				if (this.#isDraggable) {
+					this.baseElement.setAttribute('tabindex', '-1');
+
+					const onComplete = () => {
+						this.baseElement.removeAttribute('tabindex');
+
+						e.target.removeEventListener('mouseup', onComplete);
+						e.target.removeEventListener('dragend', onComplete);
+					};
+
+					e.target.addEventListener('mouseup', onComplete, { once: true });
+					e.target.addEventListener('dragend', onComplete, { once: true });
+				}
+			});
+
+			super.init?.();
+		}
+
 		attributeChangedCallback(attrName, oldValue, newValue) {
 			super.attributeChangedCallback?.(attrName, oldValue, newValue);
 			if (attrName === 'draggable') {