fix(Editable): maxLength not working (#1325)

* ✨ feat: add maxLength to input field * 🐛 fix: proper prop casing Co-authored-by: zernonia <[email protected]> * test: add test case for maxLength props --------- Co-authored-by: zernonia <[email protected]>
unovue · Oct 1, 2024 · 8578dc9 · 8578dc9
1 parent f76856a
commit 8578dc9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git 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')
+  })
 })
diff --git 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"