PR: Text selection during the drag-n-drop (Safari, again) (#6973)

* work for the surveyjs/private-tasks#284 * work for the surveyjs/private-tasks#284 * work for the surveyjs/private-tasks#284 (review-1)
surveyjs · Sep 19, 2023 · 748d579 · 748d579
1 parent 487d538
commit 748d579
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/dragdrop/dom-adapter.ts b/src/dragdrop/dom-adapter.ts
@@ -53,9 +53,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     this.currentX = pointerMoveEvent.pageX;
     this.currentY = pointerMoveEvent.pageY;
     if (this.isMicroMovement) return;
-    document.body.style.setProperty("touch-action", "");
-    document.body.style.setProperty("user-select", "");
-    document.body.style.setProperty("-webkit-user-select", "");
+    this.returnUserSelectBack();
     this.stopLongTap();
   };
   // see https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag
@@ -81,8 +79,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     this.startX = event.pageX;
     this.startY = event.pageY;
     document.body.style.setProperty("touch-action", "none", "important");
-    document.body.style.setProperty("user-select", "none", "important");
-    document.body.style.setProperty("-webkit-user-select", "none", "important");
+    document.body.style.setProperty("-webkit-touch-callout", "none", "important");
 
     this.timeoutID = setTimeout(() => {
       this.doStartDrag(
@@ -281,9 +278,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     this.savedTargetNode = null;
     this.savedTargetNodeParent = null;
 
-    document.body.style.setProperty("touch-action", "");
-    document.body.style.setProperty("user-select", "");
-    document.body.style.setProperty("-webkit-user-select", "");
+    this.returnUserSelectBack();
   };
   private drop = () => {
     this.dd.drop();
@@ -316,10 +311,19 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     }
   }
 
+  private returnUserSelectBack() {
+    document.body.style.setProperty("touch-action", "auto");
+    document.body.style.setProperty("user-select", "auto");
+    document.body.style.setProperty("-webkit-user-select", "auto");
+    document.body.style.setProperty("-webkit-touch-callout", "default");
+  }
+
   public draggedElementShortcut: any = null;
   public rootContainer: HTMLElement;
 
   public startDrag(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement, preventSaveTargetNode: boolean = false): void {
+    document.body.style.setProperty("user-select", "none", "important");
+    document.body.style.setProperty("-webkit-user-select", "none", "important");
     if (IsTouch) {
       this.startLongTapProcessing(
         event,