From 1c697b4dc8d78f4249c7ec68d4799bd6b1ce360f Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Sun, 27 Oct 2024 23:52:02 +0800
Subject: [PATCH] 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
---
 .../src/NumberField/NumberField.test.ts       | 19 +++++++++++++++++++
 .../src/NumberField/NumberFieldInput.vue      |  1 +
 2 files changed, 20 insertions(+)

diff --git a/packages/radix-vue/src/NumberField/NumberField.test.ts b/packages/radix-vue/src/NumberField/NumberField.test.ts
index c4d0d8b37..b01c61b8f 100644
--- 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
index 81eb6e16d..5fe2810bd 100644
--- 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 />