@samline/forms 2.2.2 → 2.2.3

package/README.md

@@ -42,10 +42,10 @@ Requires Node 20+ when bundling. Runtime target is ES2020.
 Use the browser build when you do not have a bundler and need to run the package directly in HTML, Shopify, WordPress, or any traditional template.
 
 ```html
-<script src="https://unpkg.com/@samline/forms@2.2.2/dist/browser/global.global.js"></script>
+<script src="https://unpkg.com/@samline/forms@2.2.3/dist/browser/global.global.js"></script>
 ```
 
-> Pin the version in production. Replace `2.2.2` with the version you ship.
+> Pin the version in production. Replace `2.2.3` with the version you ship.
 
 The browser bundle exposes a single global: `window.Forms`.
 
@@ -55,7 +55,7 @@ The browser bundle exposes a single global: `window.Forms`.
   <button type="submit">Send</button>
 </form>
 
-<script src="https://unpkg.com/@samline/forms@2.2.2/dist/browser/global.global.js"></script>
+<script src="https://unpkg.com/@samline/forms@2.2.3/dist/browser/global.global.js"></script>
 <script>
   const contactForm = window.Forms.newForm({ id: 'contact-form' })
 

package/dist/browser/global.global.js

@@ -4692,23 +4692,36 @@ var Forms = (() => {
     form2.appendChild(input);
     return input;
   };
-  var applyFormattedValue = (visible, mirror, formatted, raw) => {
+  var applyFormattedValue = (visible, mirror, formatted, raw, inputType) => {
     const rawInput = visible.value;
     const caret = clamp(
       visible.selectionStart ?? rawInput.length,
       0,
       rawInput.length
     );
+    if (mirror && mirror.value !== raw) mirror.value = raw;
     if (rawInput === formatted) {
-      if (mirror && mirror.value !== raw) mirror.value = raw;
-      return caret;
+      const newCaret2 = pullCaretPastLeadingDelimiter(caret, formatted, inputType);
+      if (newCaret2 !== caret) restoreCursor(visible, newCaret2);
+      return newCaret2;
     }
     visible.value = formatted;
-    if (mirror) mirror.value = raw;
-    const newCaret = computeCursorPosition(caret, rawInput, formatted);
+    const newCaret = pullCaretPastLeadingDelimiter(
+      computeCursorPosition(caret, rawInput, formatted),
+      formatted,
+      inputType
+    );
     restoreCursor(visible, newCaret);
     return newCaret;
   };
+  var pullCaretPastLeadingDelimiter = (caret, value, inputType) => {
+    if (!inputType || !inputType.startsWith("delete")) return caret;
+    let cursor = caret;
+    while (cursor > 0 && isFormatChar(value[cursor - 1])) {
+      cursor -= 1;
+    }
+    return cursor;
+  };
   var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
   var computeCursorPosition = (caretPos, rawInput, newValue) => {
     if (newValue.length === 0) return 0;
@@ -4815,17 +4828,22 @@ var Forms = (() => {
       if (!field.isConnected) return;
       if (event.target !== field) return;
       const rawInput = event.target.value;
+      const inputType = readInputType(event);
       const { formatted, raw } = formatFn(rawInput, formatType, formatOptions);
       if (!formatted && !raw) {
         field.value = "";
         if (mirror && mirror.value !== "") mirror.value = "";
         return;
       }
-      applyFormattedValue(field, mirror, formatted, raw);
+      applyFormattedValue(field, mirror, formatted, raw, inputType);
       void mirrorFieldName;
     };
     return handler;
   };
+  var readInputType = (event) => {
+    const candidate = event;
+    return typeof candidate.inputType === "string" ? candidate.inputType : void 0;
+  };
   var applyFormat = async (state2, helpers, config) => {
     if (!state2.element || !state2.api) return;
     const formatter = await loadFormatter();