From cbe8f8656b0bfec171b66ead6166325acfc3f462 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Wed, 21 May 2025 09:54:39 +0200
Subject: [PATCH] fix(input-file): set buttonLabel initially (#2524)

* fix(input-file): set buttonLabel initially

* chore(input-file): add test for locale change
---
 .changeset/modern-terms-fix.md                |  5 +++
 .../input-file/src/LionInputFile.js           | 12 ++++--
 .../input-file/test/lion-input-file.test.js   | 43 +++++++++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/modern-terms-fix.md

diff --git a/.changeset/modern-terms-fix.md b/.changeset/modern-terms-fix.md
new file mode 100644
index 000000000..3627e9443
--- /dev/null
+++ b/.changeset/modern-terms-fix.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[input-file] set buttonLabel initially
diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js
index a73ab54b1..5936e59cc 100644
--- a/packages/ui/components/input-file/src/LionInputFile.js
+++ b/packages/ui/components/input-file/src/LionInputFile.js
@@ -110,7 +110,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @type {string}
    */
   get buttonLabel() {
-    return this.__buttonLabel || this._buttonNode?.textContent || '';
+    return this.__buttonLabel || this._buttonNode?.textContent?.trim() || '';
   }
 
   /**
@@ -164,6 +164,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this.enableDropZone = false;
     this.maxFileSize = MAX_FILE_SIZE;
     this.accept = '';
+    this.buttonLabel = '';
+    this._initialButtonLabel = '';
     /**
      * @type {InputFile[]}
      */
@@ -196,7 +198,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   connectedCallback() {
     super.connectedCallback();
     this.__initialUploadResponse = this.uploadResponse;
-
+    this._initialButtonLabel = this.buttonLabel;
     this._inputNode.addEventListener('change', this._onChange);
     this._inputNode.addEventListener('click', this._onClick);
   }
@@ -214,10 +216,12 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     super.onLocaleUpdated();
     if (this.multiple) {
       // @ts-ignore
-      this.buttonLabel = this.msgLit('lion-input-file:selectTextMultipleFile');
+      this.buttonLabel =
+        this._initialButtonLabel || this.msgLit('lion-input-file:selectTextMultipleFile');
     } else {
       // @ts-ignore
-      this.buttonLabel = this.msgLit('lion-input-file:selectTextSingleFile');
+      this.buttonLabel =
+        this._initialButtonLabel || this.msgLit('lion-input-file:selectTextSingleFile');
     }
   }
 
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 79354cda1..55072cf71 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
@@ -1,6 +1,8 @@
 import '@lion/ui/define/lion-input-file.js';
 import { Required } from '@lion/ui/form-core.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
 import sinon from 'sinon';
 
@@ -59,6 +61,10 @@ const file4 = /** @type {InputFile} */ (
 );
 
 describe('lion-input-file', () => {
+  const localizeManager = getLocalizeManager();
+
+  afterEach(localizeTearDown);
+
   it('has a type of "file"', async () => {
     const el = await fixture(html`<lion-input-file></lion-input-file>`);
     // @ts-expect-error [allow-protected-in-tests]
@@ -151,6 +157,43 @@ describe('lion-input-file', () => {
     expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('bar.txt');
   });
 
+  describe('structure', async () => {
+    it('can has a button label by default', async () => {
+      const el = await fixture(html`<lion-input-file></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select file');
+    });
+
+    it('can has a button label by default when multiple', async () => {
+      const el = await fixture(html`<lion-input-file multiple></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select files');
+    });
+
+    it('will update the button label on locale change', async () => {
+      const el = await fixture(html`<lion-input-file></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select file');
+
+      localizeManager.locale = 'nl-NL';
+      await localizeManager.loadingComplete;
+      await el.updateComplete;
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Selecteer bestand');
+    });
+
+    it('can overwrite the button label', async () => {
+      const el = await fixture(html`<lion-input-file .buttonLabel="${'Foo'}"></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Foo');
+
+      el.buttonLabel = 'Bar';
+      await el.updateComplete;
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Bar');
+    });
+  });
+
   describe('invalid file types', async () => {
     const fileWrongType = /** @type {InputFile} */ (
       new File(['foobar'], 'foobar.txt', {