fix: multifield item not scrollable when dragged

coral-component-multifield/src/scripts/MultifieldItem.js

@@ -209,6 +209,8 @@ const MultifieldItem = Decorator(class extends BaseComponent(HTMLElement) {
     const dragAction = new DragAction(this);
     dragAction.axis = 'vertical';
     dragAction.handle = this._elements.move;
+    dragAction.scroll = true;
+    dragAction.useScrollParent = true;
   }
 });
 

coral-dragaction/src/scripts/DragAction.js

@@ -169,6 +169,14 @@ function isOverDropZone(dragAction) {
   return el;
 }
 
+function getScrollParent(node) {
+  if (!node) {
+    return null;
+  }
+
+  return node.scrollHeight > node.clientHeight ? node : getScrollParent(node.parentNode);
+}
+
 /**
  @class Coral.DragAction
  @classdesc This a decorator which adds draggable functionality to elements.
@@ -391,6 +399,14 @@ class DragAction {
     this._scroll = transform.boolean(value);
   }
 
+  get useScrollParent() {
+    return this._useScrollParent || false;
+  }
+
+  set useScrollParent(value) {
+    this._useScrollParent = transform.boolean(value);
+  }
+
   /**
    Whether to constrain the draggable element to its container viewport.
 
@@ -414,7 +430,8 @@ class DragAction {
     }
 
     // Container
-    this._container = getViewContainer(this._dragElement) || document.body;
+    const viewContainer = getViewContainer(this._dragElement) || document.body;
+    this._container = this.useScrollParent ? getScrollParent(this._dragElement) || viewContainer : viewContainer;
 
     // Prevent dragging ghost image
     if (event.target.tagName === 'IMG') {