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

@@ -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

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",

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),
+    );
   }
 
   /**

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,

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,