fix(numeric): Fix Bug caused by initial value greater than maximum

opentiny · Jan 11, 2024 · d63ac03 · d63ac03
1 parent 6f3496e
commit d63ac03
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/examples/sites/demos/pc/app/numeric/max-min.vue b/examples/sites/demos/pc/app/numeric/max-min.vue
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value: 20,
+      value: 0,
       step: 2,
       min: 0,
       max: 10

diff --git a/packages/renderless/src/numeric/index.ts b/packages/renderless/src/numeric/index.ts
@@ -347,17 +347,17 @@ export const select = (refs: INumericRenderlessParams['refs']) => () => refs.inp
 export const mounted =
   ({ constants, parent, props, state }: Pick<INumericRenderlessParams, 'constants' | 'parent' | 'props' | 'state'>) =>
   (): void => {
-    if (state.currentValue < props.min) {
-      state.currentValue = props.min
-      state.lastInput = props.min
-      state.userInput = props.min
+    if (state.currentValue < (props.min as number)) {
+      state.currentValue = props.min as number
+      state.lastInput = props.min as number
+      state.userInput = props.min as number
     }
-    if (state.currentValue > props.max) {
-      state.currentValue = props.max
-      state.lastInput = props.max
-      state.userInput = props.max
+    if (state.currentValue > (props.max as number)) {
+      state.currentValue = props.max as number
+      state.lastInput = props.max as number
+      state.userInput = props.max as number
     }
-    const innerInput = parent.$el.querySelector('input')
+    const innerInput = parent.$el.querySelector('input')!
     innerInput.setAttribute(constants.KEY, constants.VALUE)
     innerInput.setAttribute(constants.MAX, props.max)
     innerInput.setAttribute(constants.MIN, props.min)

diff --git a/packages/vue/src/numeric/__tests__/numeric.test.tsx b/packages/vue/src/numeric/__tests__/numeric.test.tsx
@@ -67,6 +67,7 @@ describe('PC Mode', () => {
   test('min 规定组件可输入的最小数值', async () => {
     const inputValue = ref(1)
     const wrapper = mount(() => <Numeric v-model={inputValue.value} min={3}></Numeric>)
+    await nextTick()
     expect(wrapper.find('input').element.value).toEqual('3')
     wrapper.find('.tiny-numeric__decrease').trigger('mousedown')
     document.dispatchEvent(mouseup)
@@ -77,6 +78,7 @@ describe('PC Mode', () => {
   test('max 规定组件可输入的最大数值', async () => {
     const inputValue = ref(6)
     const wrapper = mount(() => <Numeric v-model={inputValue.value} max={3}></Numeric>)
+    await nextTick()
     expect(wrapper.find('input').element.value).toEqual('3')
     wrapper.find('.tiny-numeric__increase').trigger('mousedown')
     document.dispatchEvent(mouseup)