From 137a1b6cf5dd4f5a3aebb6227a9730204ab96007 Mon Sep 17 00:00:00 2001
From: Danny Moerkerke <danny.moerkerke@ing.com>
Date: Tue, 27 Jun 2023 09:18:41 +0200
Subject: [PATCH] Feat/is dragging prop (#2025)

* fix: lion-selected-filelist, restored composed: true and bubbles: true for 'file-remove-requested' event, otherwise removing files for subclassers won't work

* feat: added isDragging property
---
 .changeset/yellow-eels-rule.md                       |  5 +++++
 .../ui/components/input-file/src/LionInputFile.js    | 12 +++++-------
 .../input-file/test/lion-input-file.test.js          |  4 ++++
 3 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/yellow-eels-rule.md

diff --git a/.changeset/yellow-eels-rule.md b/.changeset/yellow-eels-rule.md
new file mode 100644
index 000000000..387a2e671
--- /dev/null
+++ b/.changeset/yellow-eels-rule.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-input-file: added isDragging property
diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js
index 12bbf4ae7..e54cb7703 100644
--- a/packages/ui/components/input-file/src/LionInputFile.js
+++ b/packages/ui/components/input-file/src/LionInputFile.js
@@ -47,6 +47,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       maxFileSize: { type: Number, attribute: 'max-file-size' },
       enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' },
       uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' },
+      isDragging: { type: Boolean, attribute: 'is-dragging', reflect: true },
       uploadResponse: { type: Array, state: false },
       _selectedFilesMetaData: { type: Array, state: true },
     };
@@ -300,11 +301,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         (/** @type {Event} */ ev) => {
           ev.preventDefault();
           ev.stopPropagation();
-          if (eventName !== 'dragleave') {
-            this.setAttribute('is-dragging', '');
-          } else {
-            this.removeAttribute('is-dragging');
-          }
+          this.isDragging = eventName !== 'dragleave';
         },
         false,
       );
@@ -316,7 +313,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         if (ev.target === this._inputNode) {
           ev.preventDefault();
         }
-        this.removeAttribute('is-dragging');
+        this.isDragging = false;
       },
       false,
     );
@@ -436,6 +433,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               ];
             }
           });
+          // this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
     }
@@ -468,7 +466,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   _processDroppedFiles(ev) {
     ev.preventDefault();
-    this.removeAttribute('is-dragging');
+    this.isDragging = false;
 
     const isDraggingMultipleWhileNotSupported =
       ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple;
diff --git a/packages/ui/components/input-file/test/lion-input-file.test.js b/packages/ui/components/input-file/test/lion-input-file.test.js
index 67d6a2ed7..40558b53e 100644
--- a/packages/ui/components/input-file/test/lion-input-file.test.js
+++ b/packages/ui/components/input-file/test/lion-input-file.test.js
@@ -927,12 +927,14 @@ describe('lion-input-file', () => {
     it('should set "is-dragging" on dragenter', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragenter', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
     it('should set "is-dragging" on dragover', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragover', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
@@ -942,6 +944,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 
@@ -951,6 +954,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       window.dispatchEvent(new Event('drop', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });