fix(NumberField): not applying input value when keydown.enter (#1395)

* fix(NumberField): not applying input value when keydown.enter * test: add cases for keydown enter event
unovue · Oct 27, 2024 · 1c697b4 · 1c697b4
1 parent 3e4685d
commit 1c697b4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/radix-vue/src/NumberField/NumberField.test.ts b/packages/radix-vue/src/NumberField/NumberField.test.ts
@@ -234,6 +234,25 @@ describe('numberField', () => {
       expect(input.value).toBe('-1')
     })
   })
+
+  describe('given setting the input value manually and keydown enter', async () => {
+    it('should it update the value appropriately', async () => {
+      const { input } = setup({
+        defaultValue: 6,
+        formatOptions: {
+          style: 'currency',
+          currency: 'EUR',
+          currencyDisplay: 'code',
+          currencySign: 'accounting',
+        },
+      })
+
+      input.value = '7'
+      expect(input.value).toBe('7')
+      await fireEvent.keyDown(input, { key: kbd.ENTER })
+      expect(input.value).toBe('EUR 7.00')
+    })
+  })
 })
 
 describe('given checkbox in a form', async () => {

diff --git a/packages/radix-vue/src/NumberField/NumberFieldInput.vue b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
@@ -78,6 +78,7 @@ onMounted(() => {
       if (!rootContext.validate(nextValue))
         event.preventDefault()
     }"
+    @keydown.enter="rootContext.applyInputValue($event.target?.value)"
     @blur="rootContext.applyInputValue($event.target?.value)"
   >
     <slot />