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

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[input-file] set buttonLabel initially

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');
     }
   }
 

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', {