Merge pull request #1543 from kintone-labs/hot-fix_Fix-Attachment-DND…

…-issue [Hot fix] SSR-4599: fix attachment DnD issue
kintone-labs · May 21, 2024 · c0d1373 · c0d1373
2 parents 64e3e35 + 59e07d7
commit c0d1373
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 42 deletions.
diff --git a/src/attachment/index.ts b/src/attachment/index.ts
@@ -61,6 +61,7 @@ let exportAttachment;
     @state()
     private _isDraging = false;
 
+    private _dragEnterCounter = 0;
     private _locale = this._getLocale();
 
     @query(".kuc-attachment__group__files")
@@ -126,26 +127,25 @@ let exportAttachment;
           @dragenter="${this._handleDragEnter}"
           @dragover="${this._handleDragOver}"
           @dragleave="${this._handleDragLeave}"
+          @drop="${this._handleDragDrop}"
         >
           <div
             class="kuc-attachment__group__files__droppable"
-            @drop="${this._handleDragDrop}"
             ?hidden="${!this._isDraging}"
           >
           <div class="kuc-attachment__group__files__droppable__text">${
             this._locale.ATTACHMENT_DRAG_DROP_ZONE
           }</div>
           </div>
           <ul
-            class="kuc-attachment__group__files__display-area"
-            ?hidden="${this._isDraging}"
+            class="kuc-attachment__group__files__display-area${this._isDraging ? " kuc-attachment__group__files__not-droppable--dragenter" : ""}"
           >
           ${this.files.map((item, number) =>
             this._getAttachmentItemTemplate(item, number),
           )}
           </ul>
-          <div class="kuc-attachment__group__files__browse-button"
-          ?hidden="${this._isDraging || this.disabled}">
+          <div class="kuc-attachment__group__files__browse-button${this._isDraging ? " kuc-attachment__group__files__not-droppable--dragenter" : ""}"
+          ?hidden="${this.disabled}">
             <span class="kuc-attachment__group__files__browse-button__text">${
               this._locale.ATTACHMENT_BROWSE
             }</span>
@@ -298,38 +298,25 @@ let exportAttachment;
 
     private _handleDragEnter(event: DragEvent) {
       if (this.disabled) return;
-      if (
-        !this._isDraging &&
-        event.target instanceof HTMLElement &&
-        event.target.closest(".kuc-attachment__group__files") &&
-        this._isFileOrDirectoryDrag(event)
-      ) {
+      this._dragEnterCounter++;
+      if (this._dragEnterCounter === 1 && this._isFileOrDirectoryDrag(event)) {
         event.preventDefault();
-        this._showDroppableArea();
+        const DRAG_TEXT_BORDER_WIDTH = 2;
+        const FILES_BORDER_WIDTH = 1;
+        this._groupFilesEl.style.height =
+          this._groupFilesEl.getBoundingClientRect().height + "px";
+        this._dragTextEl.style.width =
+          this._groupFilesEl.getBoundingClientRect().width -
+          FILES_BORDER_WIDTH * 2 +
+          "px";
+        this._dragTextEl.style.height =
+          this._groupFilesEl.getBoundingClientRect().height -
+          (FILES_BORDER_WIDTH + DRAG_TEXT_BORDER_WIDTH) * 2 +
+          "px";
+        this._isDraging = true;
       }
     }
 
-    private _showDroppableArea() {
-      const DRAG_TEXT_BORDER_WIDTH = 2;
-      const FILES_BORDER_WIDTH = 1;
-      this._groupFilesEl.style.height =
-        this._groupFilesEl.getBoundingClientRect().height + "px";
-      this._dragTextEl.style.width =
-        this._groupFilesEl.getBoundingClientRect().width -
-        FILES_BORDER_WIDTH * 2 +
-        "px";
-      this._dragTextEl.style.height =
-        this._groupFilesEl.getBoundingClientRect().height -
-        (FILES_BORDER_WIDTH + DRAG_TEXT_BORDER_WIDTH) * 2 +
-        "px";
-      this._isDraging = true;
-    }
-
-    private _hiddenDroppableArea() {
-      this._groupFilesEl.style.height = "var(--kuc-attachment-height, auto)";
-      this._isDraging = false;
-    }
-
     private _handleDragOver(event: DragEvent) {
       if (this.disabled) return;
       event.stopPropagation();
@@ -339,12 +326,12 @@ let exportAttachment;
     }
 
     private _handleDragDrop(event: DragEvent) {
-      if (this.disabled) return;
+      if (this.disabled || !this._isDraging) return;
       event.preventDefault();
+      this._handleDragLeave();
       if (this._isFileDrop(event)) {
         this._addFiles(event);
       }
-      this._hiddenDroppableArea();
     }
 
     private _isFileDrop(event: DragEvent) {
@@ -363,13 +350,13 @@ let exportAttachment;
       return true;
     }
 
-    private _handleDragLeave(event: DragEvent) {
+    private _handleDragLeave() {
       if (this.disabled) return;
-      if (
-        event.target instanceof HTMLElement &&
-        event.target.closest(".kuc-attachment__group__files__droppable")
-      ) {
-        this._hiddenDroppableArea();
+      this._dragEnterCounter--;
+
+      if (this._dragEnterCounter === 0) {
+        this._groupFilesEl.style.height = "var(--kuc-attachment-height, auto)";
+        this._isDraging = false;
       }
     }
 

diff --git a/src/attachment/style.ts b/src/attachment/style.ts
@@ -70,7 +70,7 @@ export const ATTACHMENT_CSS = `
     text-decoration: none;
   }
   .kuc-attachment__group__files__browse-button[hidden]{
-    display: none
+    display: none;
   }
   .kuc-attachment__group__files__browse-button:focus-within {
     border: 1px solid #3498db;
@@ -207,4 +207,7 @@ export const ATTACHMENT_CSS = `
   .kuc-attachment__group__files__browse-message[hidden] {
     display: none;
   }
+  .kuc-attachment__group__files__not-droppable--dragenter {
+    visibility: hidden;
+  }
 `;