Merge pull request #2360 from ing-bank/fix/accept-attribute

Fix the bug that accept attribute in the input field didn't work properly

.changeset/fair-tables-pay.md

@@ -0,0 +1,5 @@
+---
+"@lion/ui": patch
+---
+
+[input-file] fix the bug that accept attribute in the input field didn't work properly

packages/ui/components/input-file/src/FileHandle.js

@@ -53,7 +53,7 @@ export class FileHandle {
    */
   // eslint-disable-next-line class-methods-use-this
   _getFileNameExtension(fileName) {
-    return fileName.slice(fileName.lastIndexOf('.') + 1);
+    return fileName.slice(fileName.lastIndexOf('.'));
   }
 
   // TODO: seems to suggest upload is going on...

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

@@ -232,7 +232,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     /** @type {string[]} */
     let allowedFileExtensions = [];
     if (this.accept) {
-      const acceptedFiles = this.accept.replace(/\s+/g, '').replace(/\.+/g, '').split(',');
+      const acceptedFiles = this.accept.replace(/\s+/g, '').split(',');
       allowedFileTypes = acceptedFiles.filter(acceptedFile => acceptedFile.includes('/'));
       allowedFileExtensions = acceptedFiles.filter(acceptedFile => !acceptedFile.includes('/'));
     }
@@ -692,8 +692,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     if (allowedFileExtensions.length) {
       array = allowedFileExtensions;
-      // eslint-disable-next-line no-return-assign
-      array = array.map(item => (item = `.${item}`));
       lastItem = array.pop();
       arrayLength = array.length;
     } else if (allowedFileTypes.length) {

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

@@ -158,6 +158,17 @@ describe('lion-input-file', () => {
       })
     );
 
+    it('error should not be there when the file extensions are accepted', async () => {
+      const el = await fixture(html`
+        <lion-input-file label="Select" accept=".txt"></lion-input-file>
+      `);
+
+      mimicSelectFile(el, [fileWrongType]);
+      await el.updateComplete;
+
+      expect(el.hasFeedbackFor.length).to.equal(0);
+    });
+
     it('should not be added to the selected list', async () => {
       const el = await fixture(html`
         <lion-input-file label="Select" accept="text/plain"></lion-input-file>
@@ -343,20 +354,6 @@ describe('lion-input-file', () => {
         expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
       });
     });
-
-    it('error message should add all file extensions to the validator message also works without dots "."', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="jpg, png, pdf"></lion-input-file>
-      `);
-
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach(error => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
-      });
-    });
   });
 
   describe('invalid file sizes', async () => {