fix(range): emit ionInput when value changes

Author: thetaPC

core/src/components/range/range.tsx

@@ -213,7 +213,12 @@ export class Range implements ComponentInterface {
    */
   @Prop({ mutable: true }) value: RangeValue = 0;
   @Watch('value')
-  protected valueChanged() {
+  protected valueChanged(newVlue: RangeValue, oldValue: RangeValue) {
+    // The check is necessary because the value can be an object.
+    if (JSON.stringify(newVlue) !== JSON.stringify(oldValue)) {
+      this.ionInput.emit({ value: this.value });
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }
@@ -591,8 +596,6 @@ export class Range implements ComponentInterface {
           upper: Math.max(valA, valB),
         };
 
-    this.ionInput.emit({ value: this.value });
-
     this.noUpdate = false;
   }
 

core/src/components/range/test/range-events.e2e.ts

@@ -217,6 +217,37 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         expect(ionInputSpy).toHaveReceivedEvent();
       });
 
+      test('should not emit when the value does not change', async ({ page }) => {
+        /**
+         * Requires padding to prevent the knob from being clipped.
+         * If it's clipped, then the value might be one off.
+         * For example, if the knob is clipped on the right, then the value
+         * will be 99 instead of 100.
+         */
+        await page.setContent(
+          `
+          <div style="padding: 0 20px">
+            <ion-range aria-label="range"></ion-range>
+          </div>
+        `,
+          config
+        );
+
+        const rangeHandle = page.locator('ion-range .range-knob-handle');
+        const ionInputSpy = await page.spyOnEvent('ionInput');
+
+        const rangeHandleBoundingBox = await rangeHandle.boundingBox();
+        const x = rangeHandleBoundingBox!.width / 2;
+        const y = rangeHandleBoundingBox!.height / 2;
+
+        // Click in the middle of the knob to prevent the knob from moving.
+        await rangeHandle.click({
+          position: { x, y },
+        });
+
+        expect(ionInputSpy).not.toHaveReceivedEvent();
+      });
+
       test('should emit when the knob is moved with the keyboard', async ({ page }) => {
         await page.setContent(`<ion-range aria-label="range" value="50"></ion-range>`, config);