@zywave/zui-slider 4.4.0-pre.4 → 4.4.0-pre.5

package/src/zui-slider.ts

@@ -70,7 +70,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       visible: boolean;
       focused: boolean;
       timer?: ReturnType<typeof setTimeout>;
-      debounceTimer?: ReturnType<typeof setTimeout>;
     }
   >([
     ['thumb', { visible: false, focused: false }],
@@ -78,12 +77,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     ['endThumb', { visible: false, focused: false }],
   ]);
 
-  // Pre-bound floating input handlers cached to avoid new function references on every render
-  #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));
-  #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));
-  #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));
-
-  // Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
+  // Cached floating input change handlers; commit value on Enter or blur
   #onThumbFloatingChange = this.#makeFloatingChange(
     'thumb',
     (v) => (this.value = v),
@@ -100,6 +94,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     () => this.#onRangeChange()
   );
 
+  // Cached keydown handler: Enter commits the floating input value in both number and text modes.
+  #onFloatingInputKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const input = e.target as HTMLInputElement;
+      input.dispatchEvent(new Event('change'));
+      input.blur();
+    }
+  };
+
   // Cached range drag input handlers
   #onRangeStartInput = this.#onRangeInput('start');
   #onRangeEndInput = this.#onRangeInput('end');
@@ -243,9 +247,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   #clearAllThumbInputState() {
     for (const entry of this.#thumbInputState.values()) {
       clearTimeout(entry.timer);
-      clearTimeout(entry.debounceTimer);
       entry.timer = undefined;
-      entry.debounceTimer = undefined;
       entry.visible = false;
       entry.focused = false;
     }
@@ -524,6 +526,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   #renderSingle() {
     const progress = this.progress;
     const { nativeMin, nativeMax, nativeStep } = this.#nativeRangeAttrs;
+    // live() required: direct DOM writes during drag don't trigger a state change, so Lit won't re-sync without it.
     const nativeValue = this.#stepsMode ? String(Math.max(0, this.#stepsIndexOf(this.#value))) : this.#value;
     return html`
       <div class="single-wrapper">
@@ -534,7 +537,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .min="${nativeMin}"
           .max="${nativeMax}"
           .step="${nativeStep}"
-          .value="${nativeValue}"
+          .value="${live(nativeValue)}"
           ?disabled="${this.disabled || this.readOnly}"
           @input="${this.#onInput}"
           @change="${this.#onChange}"
@@ -545,7 +548,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         />
         ${this.#renderFloatingInput(
           this.#value,
-          this.#onThumbFloatingInput,
           this.#onThumbFloatingChange,
           'thumb',
           this.#isVisible('thumb'),
@@ -564,7 +566,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(
           this.#valueStart,
-          this.#onStartThumbFloatingInput,
           this.#onStartThumbFloatingChange,
           'startThumb',
           this.#isVisible('startThumb'),
@@ -573,7 +574,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         ${this.#renderRangeInput('end')}
         ${this.#renderFloatingInput(
           this.#valueEnd,
-          this.#onEndThumbFloatingInput,
           this.#onEndThumbFloatingChange,
           'endThumb',
           this.#isVisible('endThumb'),
@@ -615,7 +615,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
 
   #renderFloatingInput(
     val: string,
-    onInput: (e: Event) => void,
     onFloatingChange: (e: Event) => void,
     flag: ThumbFlag,
     visible: boolean,
@@ -623,7 +622,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   ) {
     const h = this.#h[flag];
     // type="text" in steps mode to allow label and stepParser input.
-    // live() required: same-value debounce resolutions skip reactive updates, so Lit won't re-sync without it.
+    // live() required: commits that snap/clamp to the current value skip reactive updates, so Lit won't re-sync without it.
     const ariaLabel =
       flag === 'startThumb' ? 'Range start value' : flag === 'endThumb' ? 'Range end value' : 'Slider value';
     return html`
@@ -642,7 +641,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .step="${this.#stepsMode ? '' : this.step > 0 ? String(this.step) : '1'}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
-          @input="${onInput}"
+          @keydown="${this.#onFloatingInputKeydown}"
           @change="${onFloatingChange}"
           @focus="${h.focus}"
           @blur="${h.blur}"
@@ -756,58 +755,28 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         return;
       }
       const input = e.target as HTMLInputElement;
-      const entry = this.#thumbInputState.get(flag)!;
-      clearTimeout(entry.debounceTimer);
-      entry.debounceTimer = undefined;
       if (input.value === '') {
         input.value = this.#currentValueForFlag(flag);
         return;
       }
+      const before = this.#currentValueForFlag(flag);
       if (this.#stepsMode) {
         const resolved = this.#resolveFloatingInput(input.value);
         if (resolved !== null) {
           setter(resolved);
           this.requestUpdate();
-          dispatch();
+          if (this.#currentValueForFlag(flag) !== before) {
+            dispatch();
+          }
         } else {
           input.value = this.#currentValueForFlag(flag);
         }
       } else {
         setter(this.#processFloatingValue(parseFloat(input.value)));
         this.requestUpdate();
-        dispatch();
-      }
-    };
-  }
-
-  #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {
-    return (e: Event) => {
-      if (this.readOnly) {
-        return;
-      }
-      const input = e.target as HTMLInputElement;
-      const entry = this.#thumbInputState.get(flag)!;
-      clearTimeout(entry.debounceTimer);
-      entry.debounceTimer = undefined;
-      if (input.value === '') {
-        return;
-      }
-      if (this.#stepsMode) {
-        // Capture raw string at event time so the debounce closure reads the right value
-        const raw = input.value;
-        entry.debounceTimer = setTimeout(() => {
-          const resolved = this.#resolveFloatingInput(raw);
-          if (resolved !== null) {
-            setter(resolved);
-            this.requestUpdate();
-          }
-        }, 500);
-      } else {
-        const raw = parseFloat(input.value);
-        entry.debounceTimer = setTimeout(() => {
-          setter(this.#processFloatingValue(raw));
-          this.requestUpdate();
-        }, 500);
+        if (this.#currentValueForFlag(flag) !== before) {
+          dispatch();
+        }
       }
     };
   }