fix: NumberInput v-model

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.14
+
+- Fix `v-model` on `NumberInput`
+
 ## v2.0.13
 
 - Fix `maxFractionDigits` prop on `Number Input`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/NumberInput/NumberInput.mdx

@@ -1,7 +1,7 @@
 import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
 import { Primary, Currency } from './NumberInput.stories';
 
-# Input Number
+# Number Input
 
 ## Primary
 

src/components/NumberInput/NumberInput.stories.js

@@ -3,7 +3,7 @@ import mdx from './NumberInput.mdx';
 import { NumberInputMode } from './constants';
 
 export default {
-  title: 'Components/Input Number',
+  title: 'Components/Number Input',
   component: NumberInput,
   parameters: {
     docs: {

src/components/NumberInput/NumberInput.vue

@@ -2,6 +2,7 @@
   <div
     class="uic-input-number-container"
     data-testid="uic-input-number-container"
+    v-bind="containerProps"
   >
     <Label
       :label-for="id"
@@ -11,6 +12,7 @@
       data-testid="uic-input-number-label"
     />
     <InputNumber
+      data-testid="testing-number"
       :currency="currency"
       :disabled="disabled"
       :input-class="[
@@ -33,7 +35,8 @@
       unstyled
       @blur="emits('blur')"
       @focus="emits('focus')"
-      @input="(e) => emits('update:modelValue', e.value as number)"
+      @update:modelValue="emits('update:modelValue', $event)"
+      @input="emits('update:modelValue', $event.value as number)"
     />
     <!-- The PrimeVue number input does not have helper text, I copied this from the PrimeVue text input. -->
     <small
@@ -58,7 +61,7 @@ export default {
 </script>
 <script setup lang="ts">
 import InputNumber, { InputNumberProps } from 'primevue/inputnumber';
-import { InputHTMLAttributes, computed, useAttrs } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes, computed, useAttrs } from 'vue';
 
 import Label from '../Label/Label.vue';
 import { NumberInputMode } from './constants';
@@ -67,6 +70,7 @@ const attrs = useAttrs();
 
 const props = withDefaults(
   defineProps<{
+    containerProps?: HTMLAttributes;
     disabled?: InputNumberProps['disabled'];
     error?: boolean;
     helperText?: string;
@@ -86,6 +90,7 @@ const props = withDefaults(
     success?: boolean;
   }>(),
   {
+    containerProps: undefined,
     disabled: false,
     error: false,
     helperText: undefined,
@@ -130,7 +135,7 @@ const currency = computed(() =>
 }
 
 .uic-input-number {
-  @apply px-4 py-3;
+  @apply w-full px-4 py-3;
   @apply text-sm text-gray-800;
   @apply bg-white;
   @apply border border-gray-200 rounded;
@@ -190,4 +195,3 @@ const currency = computed(() =>
   }
 }
 </style>
-NumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputMode

src/components/NumberInput/__tests__/InputNumber.spec.ts → src/components/NumberInput/__tests__/NumberInput.spec.ts

@@ -24,34 +24,40 @@ describe('NumberInput', () => {
     expect(helperText.textContent).toContain(DEFAULT_PROPS.helperText);
   });
 
-  it('updates', () => {
-    const { getByTestId } = render(NumberInput, {
-      props: { ...DEFAULT_PROPS, modelValue: 50 }
+  it('updates', async () => {
+    const { emitted, getByTestId } = render(NumberInput, {
+      props: { ...DEFAULT_PROPS }
     });
     const numberInput = getByTestId('uic-input-number');
 
-    expect(numberInput).toHaveValue('50');
-    fireEvent.update(numberInput, '123');
+    expect(numberInput).not.toHaveValue('123');
+    expect(numberInput).not.toHaveAttribute('aria-valuenow', '123');
+
+    await fireEvent.update(numberInput, '123');
+    await fireEvent.blur(numberInput);
+
     expect(numberInput).toHaveValue('123');
+    expect(numberInput).toHaveAttribute('aria-valuenow', '123');
+    expect(emitted()).toHaveProperty('update:modelValue', [[123]]);
   });
 
-  it('emits focus', () => {
+  it('emits focus', async () => {
     const { getByTestId, emitted } = render(NumberInput, {
       props: DEFAULT_PROPS
     });
     const numberInput = getByTestId('uic-input-number');
 
-    fireEvent.focus(numberInput);
+    await fireEvent.focus(numberInput);
     expect(emitted()).toHaveProperty('focus');
   });
 
-  it('emits blur', () => {
+  it('emits blur', async () => {
     const { getByTestId, emitted } = render(NumberInput, {
       props: DEFAULT_PROPS
     });
     const numberInput = getByTestId('uic-input-number');
 
-    fireEvent.blur(numberInput);
+    await fireEvent.blur(numberInput);
     expect(emitted()).toHaveProperty('blur');
   });
 });