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``);
// @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``);
+ // @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``);
+ // @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``);
+ // @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``);
+ // @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', {