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)" >