From 8b5da5b9282f6400654b310cac05805414a29864 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Mon, 23 Dec 2024 22:33:38 +0700
Subject: [PATCH] Fix triggering Number Stepper's input event twice

---
 src/modules/ui/dialog/navigation-dialog.ts | 10 ++++++++--
 src/web-components/bx-number-stepper.ts    | 13 ++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/modules/ui/dialog/navigation-dialog.ts b/src/modules/ui/dialog/navigation-dialog.ts
index d39b376..d7f6aea 100755
--- a/src/modules/ui/dialog/navigation-dialog.ts
+++ b/src/modules/ui/dialog/navigation-dialog.ts
@@ -5,6 +5,7 @@ import { BxEventBus } from "@/utils/bx-event-bus";
 import { BxLogger } from "@/utils/bx-logger";
 import { calculateSelectBoxes, CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
+import { BxNumberStepper } from "@/web-components/bx-number-stepper";
 
 export enum NavigationDirection {
     UP = 1,
@@ -378,8 +379,13 @@ export class NavigationDialogManager {
         if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
             const $range = document.activeElement;
             if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
-                $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
-                $range.dispatchEvent(new InputEvent('input'));
+                const $numberStepper = $range.closest('.bx-number-stepper') as BxNumberStepper;
+                if ($numberStepper) {
+                    BxNumberStepper.change.call($numberStepper, direction === NavigationDirection.LEFT ? 'dec' : 'inc');
+                } else {
+                    $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
+                    $range.dispatchEvent(new InputEvent('input'));
+                }
                 handled = true;
             }
         }
diff --git a/src/web-components/bx-number-stepper.ts b/src/web-components/bx-number-stepper.ts
index 8fbd5b1..2a013ba 100755
--- a/src/web-components/bx-number-stepper.ts
+++ b/src/web-components/bx-number-stepper.ts
@@ -114,7 +114,6 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
         self.$range = $range;
         options.hideSlider && $range.classList.add('bx-gone');
 
-        $range.addEventListener('input', self.onRangeInput);
         self.addEventListener('input', self.onRangeInput);
         self.appendChild($range);
 
@@ -165,7 +164,7 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
 
         this.$text.textContent = BxNumberStepper.updateTextValue.call(this);
         if (this.$range) {
-            this.$range.value = this.options.reverse ? -value : value;
+            this.$range.value = (this.options.reverse ? -this.controlValue : this.controlValue).toString();
         }
 
         BxNumberStepper.updateButtonsVisibility.call(this);
@@ -258,11 +257,14 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
     }
 
     private static buttonPressed(this: BxNumberStepper, e: Event, $btn: HTMLElement) {
+        BxNumberStepper.change.call(this, $btn.dataset.type as ButtonType);
+    }
+
+    static change(this: BxNumberStepper, direction:'inc' | 'dec') {
         let value = this.controlValue;
         value = this.options.reverse ? -value : value;
 
-        const btnType = $btn.dataset.type as ButtonType;
-        if (btnType === 'dec') {
+        if (direction === 'dec') {
             value = Math.max(this.uiMin, value - this.steps);
         } else {
             value = Math.min(this.uiMax, value + this.steps);
@@ -271,7 +273,8 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
         value = this.options.reverse ? -value : value;
         BxNumberStepper.setValue.call(this, value);
         BxNumberStepper.updateButtonsVisibility.call(this);
-        this.onChange && this.onChange(e, value);
+
+        this.onChange && this.onChange(null, this.controlValue);
     }
 
     private static clearIntervalId(this: BxNumberStepper) {