Fix triggering Number Stepper's input event twice

This commit is contained in:
redphx 2024-12-23 22:33:38 +07:00
parent fe9d9895e9
commit 8b5da5b928
2 changed files with 16 additions and 7 deletions

View File

@ -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;
}
}

View File

@ -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) {