From 911a8427e5c731e17adb10734d9248151cbdd3fa Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 19 Nov 2025 13:47:35 +0700 Subject: [PATCH 1/3] fix max length message for text area --- packages/uui-textarea/lib/uui-textarea.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts index 9f11a7825..cb538e4aa 100644 --- a/packages/uui-textarea/lib/uui-textarea.element.ts +++ b/packages/uui-textarea/lib/uui-textarea.element.ts @@ -105,7 +105,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { maxlengthMessage: string | ((max: number, current: number) => string) = ( max, current, - ) => `Maximum ${max} characters, ${current} too many.`; + ) => `Maximum length exceeded (${current}/${max} characters).`; @query('#textarea') protected _textarea!: HTMLInputElement; From d906835e2b5ecc0e0ff8e31b8dac3af0e413dae9 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 19 Nov 2025 14:27:06 +0700 Subject: [PATCH 2/3] fix message for input and textarea --- packages/uui-input/lib/uui-input.element.ts | 11 +++++++---- packages/uui-textarea/lib/uui-textarea.element.ts | 11 +++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index 238cc9252..a73800562 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -123,10 +123,10 @@ export class UUIInputElement extends UUIFormControlMixin( * @default */ @property({ attribute: 'maxlength-message' }) - maxlengthMessage: string | ((max: number, current: number) => string) = ( + maxlengthMessage: string | ((max: number, exceeded: number) => string) = ( max, - current, - ) => `Maximum length exceeded (${current}/${max} characters)`; + exceeded, + ) => `Maximum ${max} characters, ${exceeded} too many.`; /** * Specifies the interval between legal numbers of the input @@ -256,7 +256,10 @@ export class UUIInputElement extends UUIFormControlMixin( () => { const label = this.maxlengthMessage; if (typeof label === 'function') { - return label(this.maxlength ?? 0, String(this.value).length); + const max = this.maxlength ?? 0; + const currentLength = String(this.value).length; + const exceeded = currentLength - max; + return label(max, exceeded); } return label; }, diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts index cb538e4aa..d79bd1743 100644 --- a/packages/uui-textarea/lib/uui-textarea.element.ts +++ b/packages/uui-textarea/lib/uui-textarea.element.ts @@ -102,10 +102,10 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { * @default */ @property({ attribute: 'maxlength-message' }) - maxlengthMessage: string | ((max: number, current: number) => string) = ( + maxlengthMessage: string | ((max: number, exceeded: number) => string) = ( max, - current, - ) => `Maximum length exceeded (${current}/${max} characters).`; + exceeded, + ) => `Maximum ${max} characters, ${exceeded} too many.`; @query('#textarea') protected _textarea!: HTMLInputElement; @@ -180,7 +180,10 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { () => { const label = this.maxlengthMessage; if (typeof label === 'function') { - return label(this.maxlength ?? 0, String(this.value).length); + const max = this.maxlength ?? 0; + const currentLength = String(this.value).length; + const exceeded = currentLength - max; + return label(max, exceeded); } return label; }, From 383303570d327039e52022c0696779d3d48ca6a3 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 19 Nov 2025 15:05:46 +0700 Subject: [PATCH 3/3] update exceed to current --- packages/uui-input/lib/uui-input.element.ts | 11 ++++------- packages/uui-textarea/lib/uui-textarea.element.ts | 11 ++++------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index a73800562..c0e9ad7a4 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -123,10 +123,10 @@ export class UUIInputElement extends UUIFormControlMixin( * @default */ @property({ attribute: 'maxlength-message' }) - maxlengthMessage: string | ((max: number, exceeded: number) => string) = ( + maxlengthMessage: string | ((max: number, current: number) => string) = ( max, - exceeded, - ) => `Maximum ${max} characters, ${exceeded} too many.`; + current, + ) => `Maximum ${max} characters, ${current - max} too many.`; /** * Specifies the interval between legal numbers of the input @@ -256,10 +256,7 @@ export class UUIInputElement extends UUIFormControlMixin( () => { const label = this.maxlengthMessage; if (typeof label === 'function') { - const max = this.maxlength ?? 0; - const currentLength = String(this.value).length; - const exceeded = currentLength - max; - return label(max, exceeded); + return label(this.maxlength ?? 0, String(this.value).length); } return label; }, diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts index d79bd1743..3e57f6f3b 100644 --- a/packages/uui-textarea/lib/uui-textarea.element.ts +++ b/packages/uui-textarea/lib/uui-textarea.element.ts @@ -102,10 +102,10 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { * @default */ @property({ attribute: 'maxlength-message' }) - maxlengthMessage: string | ((max: number, exceeded: number) => string) = ( + maxlengthMessage: string | ((max: number, current: number) => string) = ( max, - exceeded, - ) => `Maximum ${max} characters, ${exceeded} too many.`; + current, + ) => `Maximum ${max} characters, ${current - max} too many.`; @query('#textarea') protected _textarea!: HTMLInputElement; @@ -180,10 +180,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { () => { const label = this.maxlengthMessage; if (typeof label === 'function') { - const max = this.maxlength ?? 0; - const currentLength = String(this.value).length; - const exceeded = currentLength - max; - return label(max, exceeded); + return label(this.maxlength ?? 0, String(this.value).length); } return label; },