diff --git a/packages/core/src/NumberField/NumberField.test.ts b/packages/core/src/NumberField/NumberField.test.ts index 325ec866e..fb2a4d91a 100644 --- a/packages/core/src/NumberField/NumberField.test.ts +++ b/packages/core/src/NumberField/NumberField.test.ts @@ -91,6 +91,22 @@ describe('numberField', () => { expect(input.value).toBe('0') }) + it('should start at starting value on increment/decrement, when no value present', async () => { + const { input, increment, decrement } = setup({ step: 3, startingValue: 40 }) + expect(input.value).toBe('') + + await userEvent.click(increment) + expect(input.value).toBe('40') + await userEvent.click(increment) + expect(input.value).toBe('43') + + await userEvent.clear(input) + await userEvent.click(decrement) + expect(input.value).toBe('40') + await userEvent.click(decrement) + expect(input.value).toBe('37') + }) + it('should increase and decrease based on keyboard navigation on input', async () => { const { input } = setup({ defaultValue: 0, min: 0, max: 10 }) diff --git a/packages/core/src/NumberField/NumberFieldRoot.vue b/packages/core/src/NumberField/NumberFieldRoot.vue index 066c9c3e7..3e291a13c 100644 --- a/packages/core/src/NumberField/NumberFieldRoot.vue +++ b/packages/core/src/NumberField/NumberFieldRoot.vue @@ -33,6 +33,8 @@ export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps { invertWheelChange?: boolean /** Id of the element */ id?: string + /** The value at which increment/decrement starts at when no value is given. */ + startingValue?: number } export type NumberFieldRootEmits = { @@ -81,7 +83,7 @@ const props = withDefaults(defineProps(), { focusOnChange: true, }) const emits = defineEmits() -const { disabled, readonly, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props) +const { disabled, readonly, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale, startingValue } = toRefs(props) const modelValue = useVModel(props, 'modelValue', emits, { defaultValue: props.defaultValue, @@ -119,7 +121,7 @@ function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) { return const currentInputValue = numberParser.parse(inputEl.value?.value ?? '') if (isNaN(currentInputValue)) { - modelValue.value = min.value ?? 0 + modelValue.value = startingValue.value !== undefined ? clampInputValue(startingValue.value) : min.value ?? 0 } else { if (type === 'increase')