@nectary/components 5.23.0 → 5.23.1

package/bundle.js

@@ -5528,6 +5528,11 @@ class Input extends NectaryElement {
   #sizeContext;
   #maskSymbols = null;
   #internals;
+  #lastDispatchedValue = "";
+  #isControlledInput = false;
+  get #previousValue() {
+    return this.#isControlledInput === true && this.hasAttribute("value") === true ? this.getAttribute("value") ?? "" : this.#lastDispatchedValue;
+  }
   static formAssociated = true;
   constructor() {
     super();
@@ -5552,6 +5557,10 @@ class Input extends NectaryElement {
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
+    this.#isControlledInput = this.hasAttribute("value");
+    if (this.#isControlledInput === false) {
+      this.#lastDispatchedValue = this.#$input.value;
+    }
     const options = {
       signal: this.#controller.signal
     };
@@ -5593,6 +5602,7 @@ class Input extends NectaryElement {
   }
   formResetCallback() {
     this.#$input.value = "";
+    this.#lastDispatchedValue = "";
     setFormValue(this.#internals, "");
   }
   formStateRestoreCallback(state) {
@@ -5637,11 +5647,7 @@ class Input extends NectaryElement {
             this.#$input.value = min;
             setFormValue(this.#internals, min);
             this.#updateAriaValueAttributes();
-            this.dispatchEvent(
-              new CustomEvent("-change", {
-                detail: min
-              })
-            );
+            this.#dispatchChangeEvent(min);
           }
         }
         break;
@@ -5653,11 +5659,7 @@ class Input extends NectaryElement {
             this.#$input.value = max;
             setFormValue(this.#internals, max);
             this.#updateAriaValueAttributes();
-            this.dispatchEvent(
-              new CustomEvent("-change", {
-                detail: max
-              })
-            );
+            this.#dispatchChangeEvent(max);
           }
         }
       }
@@ -5708,6 +5710,8 @@ class Input extends NectaryElement {
       case "value": {
         const nextVal = newVal ?? "";
         const prevVal = this.#$input.value;
+        this.#lastDispatchedValue = nextVal;
+        this.#isControlledInput = newVal !== null;
         if (this.#wasClearedByMask) {
           this.#wasClearedByMask = false;
           if (nextVal.length === 0) {
@@ -5924,7 +5928,7 @@ class Input extends NectaryElement {
           this.#dispatchChangeEvent(mergedValue);
         }
       }
-      if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+      if ((res === null || res.mergedValue.length === 0) && this.#previousValue.length !== 0) {
         this.#dispatchMaskClearChangeEvent();
       }
     } else {
@@ -5936,6 +5940,7 @@ class Input extends NectaryElement {
     e.preventDefault();
   };
   #handleMaskBeforeInput(inputType, data2) {
+    this.#wasClearedByMask = false;
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
     let res = null;
@@ -5970,19 +5975,19 @@ class Input extends NectaryElement {
         this.#dispatchChangeEvent(mergedValue);
       }
     }
-    if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+    if ((res === null || res.mergedValue.length === 0) && this.#previousValue.length !== 0) {
       this.#dispatchMaskClearChangeEvent();
     }
   }
   #handleBeforeInput(inputType, data2) {
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
+    const value = this.#$input.value;
     switch (inputType) {
       case "insertFromPaste": {
         if (data2 === null) {
           return;
         }
-        const value = this.value;
         const cursorPos = selectionStart + data2.length;
         const nextValue = value.substring(0, selectionStart) + data2 + value.substring(selectionEnd);
         this.#selectionStart = cursorPos;
@@ -5991,7 +5996,6 @@ class Input extends NectaryElement {
         break;
       }
       case "deleteByCut": {
-        const value = this.value;
         const cursorPos = selectionStart;
         const nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
         this.#selectionStart = cursorPos;
@@ -6009,12 +6013,12 @@ class Input extends NectaryElement {
       return;
     }
     const nextValue = this.#$input.value;
-    const prevValue = this.value;
+    const prevValue = this.#previousValue;
     setFormValue(this.#internals, nextValue);
     if (prevValue !== nextValue) {
       const nextSelectionStart = this.#$input.selectionStart;
       const nextSelectionEnd = this.#$input.selectionEnd;
-      if (this.hasAttribute("value") === true) {
+      if (this.#isControlledInput === true && this.hasAttribute("value") === true) {
         this.#$input.value = prevValue;
         this.#setSelectionRange(this.#selectionStart, this.#selectionEnd);
       }
@@ -6143,9 +6147,10 @@ class Input extends NectaryElement {
     this.#dispatchChangeEvent("");
   }
   #dispatchChangeEvent(value) {
-    if (value === this.value) {
+    if (value === this.#previousValue) {
       return;
     }
+    this.#lastDispatchedValue = value;
     this.dispatchEvent(
       new CustomEvent("-change", {
         detail: value

package/input/index.js

@@ -28,6 +28,11 @@ class Input extends NectaryElement {
   #sizeContext;
   #maskSymbols = null;
   #internals;
+  #lastDispatchedValue = "";
+  #isControlledInput = false;
+  get #previousValue() {
+    return this.#isControlledInput === true && this.hasAttribute("value") === true ? this.getAttribute("value") ?? "" : this.#lastDispatchedValue;
+  }
   static formAssociated = true;
   constructor() {
     super();
@@ -52,6 +57,10 @@ class Input extends NectaryElement {
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
+    this.#isControlledInput = this.hasAttribute("value");
+    if (this.#isControlledInput === false) {
+      this.#lastDispatchedValue = this.#$input.value;
+    }
     const options = {
       signal: this.#controller.signal
     };
@@ -93,6 +102,7 @@ class Input extends NectaryElement {
   }
   formResetCallback() {
     this.#$input.value = "";
+    this.#lastDispatchedValue = "";
     setFormValue(this.#internals, "");
   }
   formStateRestoreCallback(state) {
@@ -137,11 +147,7 @@ class Input extends NectaryElement {
             this.#$input.value = min;
             setFormValue(this.#internals, min);
             this.#updateAriaValueAttributes();
-            this.dispatchEvent(
-              new CustomEvent("-change", {
-                detail: min
-              })
-            );
+            this.#dispatchChangeEvent(min);
           }
         }
         break;
@@ -153,11 +159,7 @@ class Input extends NectaryElement {
             this.#$input.value = max;
             setFormValue(this.#internals, max);
             this.#updateAriaValueAttributes();
-            this.dispatchEvent(
-              new CustomEvent("-change", {
-                detail: max
-              })
-            );
+            this.#dispatchChangeEvent(max);
           }
         }
       }
@@ -208,6 +210,8 @@ class Input extends NectaryElement {
       case "value": {
         const nextVal = newVal ?? "";
         const prevVal = this.#$input.value;
+        this.#lastDispatchedValue = nextVal;
+        this.#isControlledInput = newVal !== null;
         if (this.#wasClearedByMask) {
           this.#wasClearedByMask = false;
           if (nextVal.length === 0) {
@@ -424,7 +428,7 @@ class Input extends NectaryElement {
           this.#dispatchChangeEvent(mergedValue);
         }
       }
-      if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+      if ((res === null || res.mergedValue.length === 0) && this.#previousValue.length !== 0) {
         this.#dispatchMaskClearChangeEvent();
       }
     } else {
@@ -436,6 +440,7 @@ class Input extends NectaryElement {
     e.preventDefault();
   };
   #handleMaskBeforeInput(inputType, data) {
+    this.#wasClearedByMask = false;
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
     let res = null;
@@ -470,19 +475,19 @@ class Input extends NectaryElement {
         this.#dispatchChangeEvent(mergedValue);
       }
     }
-    if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+    if ((res === null || res.mergedValue.length === 0) && this.#previousValue.length !== 0) {
       this.#dispatchMaskClearChangeEvent();
     }
   }
   #handleBeforeInput(inputType, data) {
     const selectionStart = this.#$input.selectionStart ?? 0;
     const selectionEnd = this.#$input.selectionEnd ?? 0;
+    const value = this.#$input.value;
     switch (inputType) {
       case "insertFromPaste": {
         if (data === null) {
           return;
         }
-        const value = this.value;
         const cursorPos = selectionStart + data.length;
         const nextValue = value.substring(0, selectionStart) + data + value.substring(selectionEnd);
         this.#selectionStart = cursorPos;
@@ -491,7 +496,6 @@ class Input extends NectaryElement {
         break;
       }
       case "deleteByCut": {
-        const value = this.value;
         const cursorPos = selectionStart;
         const nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
         this.#selectionStart = cursorPos;
@@ -509,12 +513,12 @@ class Input extends NectaryElement {
       return;
     }
     const nextValue = this.#$input.value;
-    const prevValue = this.value;
+    const prevValue = this.#previousValue;
     setFormValue(this.#internals, nextValue);
     if (prevValue !== nextValue) {
       const nextSelectionStart = this.#$input.selectionStart;
       const nextSelectionEnd = this.#$input.selectionEnd;
-      if (this.hasAttribute("value") === true) {
+      if (this.#isControlledInput === true && this.hasAttribute("value") === true) {
         this.#$input.value = prevValue;
         this.#setSelectionRange(this.#selectionStart, this.#selectionEnd);
       }
@@ -643,9 +647,10 @@ class Input extends NectaryElement {
     this.#dispatchChangeEvent("");
   }
   #dispatchChangeEvent(value) {
-    if (value === this.value) {
+    if (value === this.#previousValue) {
       return;
     }
+    this.#lastDispatchedValue = value;
     this.dispatchEvent(
       new CustomEvent("-change", {
         detail: value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.23.0",
+  "version": "5.23.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",