From 259e0dd468f86f0de622082c3475a8b89f6a4b22 Mon Sep 17 00:00:00 2001
From: Danny Moerkerke <danny.moerkerke@ing.com>
Date: Tue, 20 Jun 2023 17:32:05 +0200
Subject: [PATCH] Fix/remove file (#2018)

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

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

* fix: removed composed: true and bubbles: true and set eventlistener directly on lion-selected-file-list

* Update packages/ui/components/input-file/src/LionInputFile.js

* Update packages/ui/components/input-file/src/LionInputFile.js

* Update packages/ui/components/input-file/src/LionInputFile.js

* fix: fixed test

* Update packages/ui/components/input-file/test/lion-input-file.test.js

* chore: format

* fix

---------

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
---
 .changeset/popular-plants-sparkle.md          |  5 ++++
 package-lock.json                             |  2 +-
 .../input-file/src/LionInputFile.js           | 23 ++++++++++++-------
 .../input-file/src/LionSelectedFileList.js    |  3 ---
 .../input-file/test/lion-input-file.test.js   |  5 ++--
 5 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/popular-plants-sparkle.md

diff --git a/.changeset/popular-plants-sparkle.md b/.changeset/popular-plants-sparkle.md
new file mode 100644
index 000000000..5ff9e28a2
--- /dev/null
+++ b/.changeset/popular-plants-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-selected-filelist: removed composed: true and bubbles: true and set eventlistener directly on lion-selected-file-list inside lion-input-file
diff --git a/package-lock.json b/package-lock.json
index 120a7bc7d..9f8e991ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22393,7 +22393,7 @@
     },
     "packages/ui": {
       "name": "@lion/ui",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "license": "MIT",
       "dependencies": {
         "@bundled-es-modules/message-format": "^6.0.4",
diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js
index 60b9bd8bc..eff762bf3 100644
--- a/packages/ui/components/input-file/src/LionInputFile.js
+++ b/packages/ui/components/input-file/src/LionInputFile.js
@@ -176,26 +176,28 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
   }
 
+  /**
+   * @protected
+   * @type {LionSelectedFileList}
+   */
+  get _fileListNode() {
+    return /** @type {LionSelectedFileList} */ (
+      Array.from(this.children).find(child => child.slot === 'selected-file-list')?.children[0]
+    );
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.__initialUploadResponse = this.uploadResponse;
 
     this._inputNode.addEventListener('change', this._onChange);
     this._inputNode.addEventListener('click', this._onClick);
-    this.addEventListener(
-      'file-remove-requested',
-      /** @type {EventListener} */ (this._onRemoveFile),
-    );
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._onChange);
     this._inputNode.removeEventListener('click', this._onClick);
-    this.removeEventListener(
-      'file-remove-requested',
-      /** @type {EventListener} */ (this._onRemoveFile),
-    );
   }
 
   /**
@@ -347,6 +349,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       this.__setupDragDropEventListeners();
       this.setAttribute('drop-zone', '');
     }
+
+    /** @type {LionSelectedFileList} */ (this._fileListNode).addEventListener(
+      'file-remove-requested',
+      /** @type {EventListener} */ (this._onRemoveFile),
+    );
   }
 
   /**
diff --git a/packages/ui/components/input-file/src/LionSelectedFileList.js b/packages/ui/components/input-file/src/LionSelectedFileList.js
index 9b2929d7f..de4b19900 100644
--- a/packages/ui/components/input-file/src/LionSelectedFileList.js
+++ b/packages/ui/components/input-file/src/LionSelectedFileList.js
@@ -74,10 +74,7 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
    */
   _removeFile(removedFile) {
     this.dispatchEvent(
-      // TODO: do we need bubble and composed for an internal event that only LionInputFile should know about?
       new CustomEvent('file-remove-requested', {
-        // composed: true,
-        // bubbles: true,
         detail: {
           removedFile,
           status: removedFile.status,
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 6f3f38f60..67d6a2ed7 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
@@ -852,10 +852,9 @@ describe('lion-input-file', () => {
       // @ts-expect-error [allow-protected-in-test]
       expect(el._selectedFilesMetaData[1].systemFile.name).to.equal('file2.txt');
 
-      el.dispatchEvent(
+      // @ts-expect-error [allow-protected-in-test]
+      el._fileListNode.dispatchEvent(
         new CustomEvent('file-remove-requested', {
-          composed: true,
-          bubbles: true,
           detail: {
             removedFile,
             status: removedFile.status,