web-mojo 2.1.116 → 2.1.144

package/dist/chunks/{FormView-CIa1o6FC.js → FormView-Da3OHCwQ.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Bdehjb5l.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Cs-c1f0h.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -2062,10 +2062,14 @@ class TagInputView extends View {
    * Handle focus on container
    */
   async onActionFocusInput(_event, _element) {
+    this.focus();
+  }
+  focus() {
     const input = this.element.querySelector(".tag-input-field");
     if (input && !this.disabled) {
       input.focus();
     }
+    this.focusedTagIndex = -1;
   }
   /**
    * Handle tag removal
@@ -2092,17 +2096,26 @@ class TagInputView extends View {
       }
       return;
     }
-    element.addEventListener("keydown", this.handleInputKeydown.bind(this), { once: true });
+  }
+  bindEvents() {
+    if (!this.__bnd_keydown) this.__bnd_keydown = this.handleInputKeydown.bind(this);
+    this.element.addEventListener("keydown", this.__bnd_keydown);
+    this.events.bind(this.element);
+  }
+  unbindEvents() {
+    if (this.__bnd_keydown) this.element.removeEventListener("keydown", this.__bnd_keydown);
+    this.events.unbind();
   }
   /**
    * Handle keyboard interactions
    */
   handleInputKeydown(event) {
     const input = event.target;
-    const value = input.value;
+    const value = input.value || "";
     switch (event.key) {
       case "Enter":
       case "Tab":
+      case ",":
         if (value.trim()) {
           event.preventDefault();
           this.addTag(value);
@@ -2112,13 +2125,46 @@ class TagInputView extends View {
       case "Backspace":
         if (value === "" && this.tags.length > 0) {
           event.preventDefault();
-          this.removeTag(this.tags.length - 1);
+          if (this.focusedTagIndex >= 0) {
+            this.removeTag(this.focusedTagIndex);
+            if (this.focusedTagIndex == 0) {
+              this.focus();
+            } else {
+              this.focusTag(this.focusedTagIndex - 1);
+            }
+          } else {
+            this.removeTag(this.tags.length - 1);
+          }
         }
         break;
       case "ArrowLeft":
         if (value === "" && this.tags.length > 0) {
           event.preventDefault();
-          this.focusTag(this.tags.length - 1);
+          if (this.focusedTagIndex >= 0) {
+            const newIndex = this.focusedTagIndex - 1;
+            if (newIndex >= 0) {
+              this.focusTag(newIndex);
+            } else {
+              this.focus();
+            }
+          } else {
+            this.focusTag(this.tags.length - 1);
+          }
+        }
+        break;
+      case "ArrowRight":
+        if (value === "" && this.tags.length > 0) {
+          event.preventDefault();
+          if (this.focusedTagIndex >= 0) {
+            const newIndex = this.focusedTagIndex + 1;
+            if (newIndex < this.tags.length) {
+              this.focusTag(newIndex);
+            } else {
+              this.focus();
+            }
+          } else {
+            this.focusTag(0);
+          }
         }
         break;
       case "Escape":
@@ -2248,6 +2294,7 @@ class TagInputView extends View {
     const tagElements = this.element.querySelectorAll(".tag-item");
     if (tagElements[index]) {
       this.focusedTagIndex = index;
+      console.log(`Focused tag index: ${index}`);
       tagElements[index].focus();
     }
   }
@@ -5072,4 +5119,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-CIa1o6FC.js.map
+//# sourceMappingURL=FormView-Da3OHCwQ.js.map