From be903c7b0e6c1d536ec032c2883ca99920826cd8 Mon Sep 17 00:00:00 2001 From: Ademola Adedeji Date: Mon, 30 Sep 2024 12:02:34 -0300 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20maxLength=20to=20?= =?UTF-8?q?input=20field?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/radix-vue/src/Editable/EditableInput.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/radix-vue/src/Editable/EditableInput.vue b/packages/radix-vue/src/Editable/EditableInput.vue index afa456ea1..55585ecfb 100644 --- a/packages/radix-vue/src/Editable/EditableInput.vue +++ b/packages/radix-vue/src/Editable/EditableInput.vue @@ -56,6 +56,7 @@ function handleSubmitKeyDown(event: KeyboardEvent) { :value="context.modelValue.value" :placeholder="placeholder" :disabled="disabled" + :maxLength="context.maxLength.value" :data-disabled="disabled ? '' : undefined" :data-readonly="context.readonly.value ? '' : undefined" :readonly="context.readonly.value" From 60dca260ff3ded2cc8a11a4694e426f6a7a19676 Mon Sep 17 00:00:00 2001 From: Ademola Adedeji Date: Tue, 1 Oct 2024 10:15:42 -0300 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20fix:=20proper=20prop=20casin?= =?UTF-8?q?g?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: zernonia <59365435+zernonia@users.noreply.github.com> --- packages/radix-vue/src/Editable/EditableInput.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/radix-vue/src/Editable/EditableInput.vue b/packages/radix-vue/src/Editable/EditableInput.vue index 55585ecfb..c1e276a21 100644 --- a/packages/radix-vue/src/Editable/EditableInput.vue +++ b/packages/radix-vue/src/Editable/EditableInput.vue @@ -56,7 +56,7 @@ function handleSubmitKeyDown(event: KeyboardEvent) { :value="context.modelValue.value" :placeholder="placeholder" :disabled="disabled" - :maxLength="context.maxLength.value" + :maxlength="context.maxLength.value" :data-disabled="disabled ? '' : undefined" :data-readonly="context.readonly.value ? '' : undefined" :readonly="context.readonly.value" From 374c7ac7c55bcca4c2a60056de91f18cc53fabe2 Mon Sep 17 00:00:00 2001 From: zernonia Date: Tue, 1 Oct 2024 21:35:56 +0800 Subject: [PATCH 3/3] test: add test case for maxLength props --- packages/radix-vue/src/Editable/Editable.test.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/radix-vue/src/Editable/Editable.test.ts b/packages/radix-vue/src/Editable/Editable.test.ts index 200d3d533..35d4035ae 100644 --- a/packages/radix-vue/src/Editable/Editable.test.ts +++ b/packages/radix-vue/src/Editable/Editable.test.ts @@ -147,4 +147,14 @@ describe('editable', () => { expect(preview).toHaveStyle({ visibility: 'hidden' }) }) + + it('should prevent user input text more than given `maxLength`', async () => { + const { input, edit } = setup({ editableProps: { maxLength: 10 } }) + + await userEvent.click(edit) + + await userEvent.type(input, 'lorem ipsum dolor sit amet') + + expect(input).toHaveValue('lorem ipsu') + }) })