diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx index 3fa97c4cf7a..ca1924ed3f2 100644 --- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx +++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx @@ -19,7 +19,7 @@ import type { PropType } from 'vue' import type { VTextFieldSlots } from '@/components/VTextField/VTextField' type ControlSlot = { - click: () => void + click: (e: MouseEvent) => void } type VNumberInputSlots = Omit & { @@ -108,11 +108,13 @@ export const VNumberInput = genericComponent()({ } } - function onClickUp () { + function onClickUp (e: MouseEvent) { + e.stopPropagation() toggleUpDown() } - function onClickDown () { + function onClickDown (e: MouseEvent) { + e.stopPropagation() toggleUpDown(false) } @@ -143,6 +145,10 @@ export const VNumberInput = genericComponent()({ model.value = v ? +(v) : undefined } + function onControlMousedown (e: MouseEvent) { + e.stopPropagation() + } + useRender(() => { const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props) @@ -162,6 +168,7 @@ export const VNumberInput = genericComponent()({ size="small" tabindex="-1" onClick={ onClickDown } + onMousedown={ onControlMousedown } /> ) : ( ()({ name="increment-btn" icon="$collapse" onClick={ onClickUp } + onMousedown={ onControlMousedown } size="small" tabindex="-1" /> @@ -236,6 +244,7 @@ export const VNumberInput = genericComponent()({ tile tabindex="-1" onClick={ onClickUp } + onMousedown={ onControlMousedown } /> ) : (!props.reverse @@ -255,6 +264,7 @@ export const VNumberInput = genericComponent()({ tile tabindex="-1" onClick={ onClickDown } + onMousedown={ onControlMousedown } /> @@ -284,6 +294,7 @@ export const VNumberInput = genericComponent()({ ]} { ...textFieldProps } style={ props.style } + inputmode="decimal" > {{ ...slots,