fix(stepper): fix unable input decimal in Stepper component (#5908)

youzan · Oct 14, 2024 · ddb9009 · ddb9009
1 parent de1ce7b
commit ddb9009
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 33 deletions.
diff --git a/packages/stepper/index.ts b/packages/stepper/index.ts
@@ -81,20 +81,21 @@ VantComponent({
 
   created() {
     this.setData({
-      currentValue: this.format(this.data.value),
+      currentValue: this.format(this.data.value).newValue,
     });
   },
 
   methods: {
     observeValue() {
       const { value } = this.data;
-      this.setData({ currentValue: this.format(value) });
+      this.setData({ currentValue: this.format(value).newValue });
     },
 
     check() {
-      const val = this.format(this.data.currentValue);
-      if (!equal(val, this.data.currentValue)) {
-        this.setData({ currentValue: val });
+      const { newValue } = this.format(this.data.currentValue);
+
+      if (!equal(newValue, this.data.currentValue)) {
+        this.setData({ currentValue: newValue });
       }
     },
 
@@ -114,20 +115,20 @@ VantComponent({
     },
 
     onBlur(event: WechatMiniprogram.InputBlur) {
-      const value = this.format(event.detail.value);
+      const data = this.format(event.detail.value);
 
-      this.setData({ currentValue: value });
+      this.setData({ currentValue: data.newValue });
 
-      this.emitChange(value);
+      this.emitChange(data);
 
       this.$emit('blur', {
         ...event.detail,
-        value,
+        value: +data.newValue,
       });
     },
 
     // filter illegal characters
-    filter(value) {
+    filter(value: string): string {
       value = String(value).replace(/[^0-9.-]/g, '');
 
       if (this.data.integer && value.indexOf('.') !== -1) {
@@ -137,20 +138,22 @@ VantComponent({
       return value;
     },
 
-    // limit value range
-    format(value) {
-      value = this.filter(value);
+    format(value: string) {
+      // filter illegal characters and format integer
+      const safeValue = this.filter(value);
 
       // format range
-      value = value === '' ? 0 : +value;
-      value = Math.max(Math.min(this.data.max, value), this.data.min);
+      const rangeValue = Math.max(
+        Math.min(this.data.max, +safeValue),
+        this.data.min
+      );
 
       // format decimal
-      if (isDef(this.data.decimalLength)) {
-        value = value.toFixed(this.data.decimalLength);
-      }
+      const newValue = isDef(this.data.decimalLength)
+        ? rangeValue.toFixed(this.data.decimalLength)
+        : String(rangeValue);
 
-      return value;
+      return { value, newValue };
     },
 
     onInput(event: WechatMiniprogram.Input) {
@@ -161,17 +164,20 @@ VantComponent({
         return;
       }
 
-      let formatted = this.format(value);
+      const formatted = this.format(value);
 
       this.emitChange(formatted);
     },
 
-    emitChange(value: string) {
+    emitChange(data: { value: string; newValue: string }) {
+      const { value, newValue } = data;
+
       if (!this.data.asyncChange) {
-        this.setData({ currentValue: value });
+        // fix when input 11. parsed to 11, unable to enter decimal
+        this.setData({ currentValue: +value === +newValue ? value : newValue });
       }
 
-      this.$emit('change', value);
+      this.$emit('change', +newValue);
     },
 
     onChange() {
@@ -184,7 +190,7 @@ VantComponent({
 
       const diff = type === 'minus' ? -this.data.step : +this.data.step;
 
-      const value = this.format(add(+this.data.currentValue, diff));
+      const value = this.format(String(add(+this.data.currentValue, diff)));
 
       this.emitChange(value);
       this.$emit(type);

diff --git a/packages/stepper/test/__snapshots__/demo.spec.ts.snap b/packages/stepper/test/__snapshots__/demo.spec.ts.snap
@@ -40,7 +40,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -98,7 +98,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -156,7 +156,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{5}}"
+              value="5"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -214,7 +214,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="number"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -272,7 +272,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -330,7 +330,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -448,7 +448,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style=""
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -506,7 +506,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style="width:40px;height:32px"
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"
@@ -564,7 +564,7 @@ exports[`should render demo and match snapshot 1`] = `
               focus=""
               style="height:22px"
               type="digit"
-              value="{{1}}"
+              value="1"
               bind:blur="onBlur"
               bind:focus="onFocus"
               bind:input="onInput"