@nectary/components 5.35.0 → 5.36.0

package/bundle.js

@@ -14844,10 +14844,11 @@ class Textarea extends NectaryElement {
   #$bottomWrapper;
   #$resizeHandle;
   #cursorPos = null;
-  #isPendingDk = false;
+  #pendingPostInputCaret = null;
   #controller = null;
   #sizeContext;
   #prevContentHeight = 0;
+  #lastValueForAutoResize;
   #dragStartY = 0;
   #intersectionObserver = null;
   #internals;
@@ -14874,7 +14875,6 @@ class Textarea extends NectaryElement {
     this.ariaMultiLine = "true";
     this.#internals.ariaMultiLine = "true";
     this.#$input.addEventListener("input", this.#onInput, options);
-    this.#$input.addEventListener("compositionstart", this.#onCompositionStart, options);
     this.#$input.addEventListener("mousedown", this.#onSelectionChange, options);
     this.#$input.addEventListener("keydown", this.#onSelectionChange, options);
     this.#$input.addEventListener("focus", this.#onInputFocus, options);
@@ -14888,6 +14888,7 @@ class Textarea extends NectaryElement {
     this.#onBottomSlotChange();
     this.#updateMinRows();
     this.#updateMaxRows();
+    this.#lastValueForAutoResize = this.#$input.value;
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -14905,6 +14906,10 @@ class Textarea extends NectaryElement {
   formResetCallback() {
     this.#$input.value = "";
     setFormValue(this.#internals, "");
+    this.#lastValueForAutoResize = "";
+    if (!this.resizable) {
+      this.#applyAutoResize(true);
+    }
   }
   formStateRestoreCallback(state) {
     if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
@@ -14912,8 +14917,14 @@ class Textarea extends NectaryElement {
     }
     if (state !== null) {
       const value = typeof state === "string" ? state : state.get(this.name);
-      this.#$input.value = value?.toString() ?? "";
-      setFormValue(this.#internals, value?.toString() ?? "");
+      const next = value?.toString() ?? "";
+      const prevLen = this.#$input.value.length;
+      this.#$input.value = next;
+      setFormValue(this.#internals, next);
+      this.#lastValueForAutoResize = next;
+      if (!this.resizable) {
+        this.#applyAutoResize(next.length < prevLen);
+      }
     }
   }
   static get observedAttributes() {
@@ -14938,20 +14949,18 @@ class Textarea extends NectaryElement {
           const isShrinkingContent = nextVal.length < prevVal.length;
           this.#$input.value = nextVal;
           setFormValue(this.#internals, nextVal);
+          this.#lastValueForAutoResize = nextVal;
           if (!this.resizable) {
-            if (isShrinkingContent) {
-              this.#$input.style.removeProperty("height");
-            }
-            const nextContentHeight = this.#$input.scrollHeight;
-            if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
-              this.#prevContentHeight = nextContentHeight;
-              this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
-            }
+            this.#applyAutoResize(isShrinkingContent);
           }
           if (!isPrevCursorEnd) {
-            this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            const growing = nextVal.length >= prevVal.length;
+            const rawCaret = growing ? this.#pendingPostInputCaret ?? prevCursorPos ?? this.#cursorPos ?? 0 : this.#cursorPos ?? prevCursorPos ?? 0;
+            const caret = Math.min(Math.max(rawCaret, 0), nextVal.length);
+            this.#$input.setSelectionRange(caret, caret);
           }
         }
+        this.#pendingPostInputCaret = null;
         break;
       }
       case "placeholder": {
@@ -15130,34 +15139,49 @@ class Textarea extends NectaryElement {
     this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);
     this.#$input.rows = this.rows;
   }
-  #onCompositionStart = () => {
-    this.#isPendingDk = true;
-  };
   #onSelectionChange = () => {
     this.#cursorPos = this.#$input.selectionEnd;
   };
+  #applyAutoResize(isShrinkingContent) {
+    if (isShrinkingContent) {
+      this.#$input.style.removeProperty("height");
+    }
+    const nextContentHeight = this.#$input.scrollHeight;
+    if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
+      this.#prevContentHeight = nextContentHeight;
+      this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
+    }
+  }
   #onInput = (e) => {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
+    const priorForResize = this.#lastValueForAutoResize;
+    const isShrinkingContent = priorForResize !== void 0 && nextValue.length < priorForResize.length;
     setFormValue(this.#internals, nextValue);
+    if (!this.resizable) {
+      this.#applyAutoResize(isShrinkingContent);
+    }
+    this.#lastValueForAutoResize = nextValue;
     if (prevValue !== nextValue) {
-      const nextCursorPos = this.#$input.selectionEnd;
-      if (!this.#isPendingDk) {
-        this.#$input.value = prevValue;
-        const prevCursorPos = this.#cursorPos;
-        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-        if (!isPrevCursorEnd) {
-          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
-        }
+      const postInputCaret = this.#$input.selectionEnd;
+      if (postInputCaret !== null) {
+        this.#pendingPostInputCaret = postInputCaret;
       }
-      this.#isPendingDk = false;
-      this.#cursorPos = nextCursorPos;
       this.dispatchEvent(
         new CustomEvent("-change", {
           detail: nextValue
         })
       );
+      queueMicrotask(() => {
+        if (!this.isConnected) {
+          return;
+        }
+        const end = this.#$input.selectionEnd;
+        if (end !== null) {
+          this.#cursorPos = end;
+        }
+      });
     }
   };
   #onDragStart = (e) => {

package/package.json

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

package/textarea/index.js

@@ -14,10 +14,11 @@ class Textarea extends NectaryElement {
   #$bottomWrapper;
   #$resizeHandle;
   #cursorPos = null;
-  #isPendingDk = false;
+  #pendingPostInputCaret = null;
   #controller = null;
   #sizeContext;
   #prevContentHeight = 0;
+  #lastValueForAutoResize;
   #dragStartY = 0;
   #intersectionObserver = null;
   #internals;
@@ -44,7 +45,6 @@ class Textarea extends NectaryElement {
     this.ariaMultiLine = "true";
     this.#internals.ariaMultiLine = "true";
     this.#$input.addEventListener("input", this.#onInput, options);
-    this.#$input.addEventListener("compositionstart", this.#onCompositionStart, options);
     this.#$input.addEventListener("mousedown", this.#onSelectionChange, options);
     this.#$input.addEventListener("keydown", this.#onSelectionChange, options);
     this.#$input.addEventListener("focus", this.#onInputFocus, options);
@@ -58,6 +58,7 @@ class Textarea extends NectaryElement {
     this.#onBottomSlotChange();
     this.#updateMinRows();
     this.#updateMaxRows();
+    this.#lastValueForAutoResize = this.#$input.value;
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -75,6 +76,10 @@ class Textarea extends NectaryElement {
   formResetCallback() {
     this.#$input.value = "";
     setFormValue(this.#internals, "");
+    this.#lastValueForAutoResize = "";
+    if (!this.resizable) {
+      this.#applyAutoResize(true);
+    }
   }
   formStateRestoreCallback(state) {
     if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
@@ -82,8 +87,14 @@ class Textarea extends NectaryElement {
     }
     if (state !== null) {
       const value = typeof state === "string" ? state : state.get(this.name);
-      this.#$input.value = value?.toString() ?? "";
-      setFormValue(this.#internals, value?.toString() ?? "");
+      const next = value?.toString() ?? "";
+      const prevLen = this.#$input.value.length;
+      this.#$input.value = next;
+      setFormValue(this.#internals, next);
+      this.#lastValueForAutoResize = next;
+      if (!this.resizable) {
+        this.#applyAutoResize(next.length < prevLen);
+      }
     }
   }
   static get observedAttributes() {
@@ -108,20 +119,18 @@ class Textarea extends NectaryElement {
           const isShrinkingContent = nextVal.length < prevVal.length;
           this.#$input.value = nextVal;
           setFormValue(this.#internals, nextVal);
+          this.#lastValueForAutoResize = nextVal;
           if (!this.resizable) {
-            if (isShrinkingContent) {
-              this.#$input.style.removeProperty("height");
-            }
-            const nextContentHeight = this.#$input.scrollHeight;
-            if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
-              this.#prevContentHeight = nextContentHeight;
-              this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
-            }
+            this.#applyAutoResize(isShrinkingContent);
           }
           if (!isPrevCursorEnd) {
-            this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            const growing = nextVal.length >= prevVal.length;
+            const rawCaret = growing ? this.#pendingPostInputCaret ?? prevCursorPos ?? this.#cursorPos ?? 0 : this.#cursorPos ?? prevCursorPos ?? 0;
+            const caret = Math.min(Math.max(rawCaret, 0), nextVal.length);
+            this.#$input.setSelectionRange(caret, caret);
           }
         }
+        this.#pendingPostInputCaret = null;
         break;
       }
       case "placeholder": {
@@ -300,34 +309,49 @@ class Textarea extends NectaryElement {
     this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);
     this.#$input.rows = this.rows;
   }
-  #onCompositionStart = () => {
-    this.#isPendingDk = true;
-  };
   #onSelectionChange = () => {
     this.#cursorPos = this.#$input.selectionEnd;
   };
+  #applyAutoResize(isShrinkingContent) {
+    if (isShrinkingContent) {
+      this.#$input.style.removeProperty("height");
+    }
+    const nextContentHeight = this.#$input.scrollHeight;
+    if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
+      this.#prevContentHeight = nextContentHeight;
+      this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
+    }
+  }
   #onInput = (e) => {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
+    const priorForResize = this.#lastValueForAutoResize;
+    const isShrinkingContent = priorForResize !== void 0 && nextValue.length < priorForResize.length;
     setFormValue(this.#internals, nextValue);
+    if (!this.resizable) {
+      this.#applyAutoResize(isShrinkingContent);
+    }
+    this.#lastValueForAutoResize = nextValue;
     if (prevValue !== nextValue) {
-      const nextCursorPos = this.#$input.selectionEnd;
-      if (!this.#isPendingDk) {
-        this.#$input.value = prevValue;
-        const prevCursorPos = this.#cursorPos;
-        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-        if (!isPrevCursorEnd) {
-          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
-        }
+      const postInputCaret = this.#$input.selectionEnd;
+      if (postInputCaret !== null) {
+        this.#pendingPostInputCaret = postInputCaret;
       }
-      this.#isPendingDk = false;
-      this.#cursorPos = nextCursorPos;
       this.dispatchEvent(
         new CustomEvent("-change", {
           detail: nextValue
         })
       );
+      queueMicrotask(() => {
+        if (!this.isConnected) {
+          return;
+        }
+        const end = this.#$input.selectionEnd;
+        if (end !== null) {
+          this.#cursorPos = end;
+        }
+      });
     }
   };
   #onDragStart = (e) => {