web-mojo 2.2.7 → 2.2.9

package/dist/chunks/{FormView-Xb_l8AD5.js → FormView-B_90L1RY.js}

@@ -652,7 +652,6 @@ class FormBuilder {
       }
     }
     if (!fieldHTML) {
-      console.log("buildFieldHTML - Processing field type:", type, "for field:", field.name);
       switch (type) {
         case "text":
           fieldHTML = this.renderTextField(field);
@@ -687,6 +686,9 @@ class FormBuilder {
         case "select":
           fieldHTML = this.renderSelectField(field);
           break;
+        case "multiselect":
+          fieldHTML = this.renderMultiSelectField(field);
+          break;
         case "checkbox":
           fieldHTML = this.renderCheckboxField(field);
           break;
@@ -1189,6 +1191,59 @@ class FormBuilder {
     };
     return Mustache.render(this.templates.select, context);
   }
+  /**
+   * Render multiselect dropdown field
+   * @param {Object} field - Field configuration
+   * @returns {string} Field HTML
+   */
+  renderMultiSelectField(field) {
+    const {
+      name,
+      label,
+      options = [],
+      value = [],
+      required = false,
+      disabled = false,
+      maxHeight = 300,
+      help = field.helpText || field.help || ""
+    } = field;
+    const placeholder = field.placeholder || field.placeHolder || "Select...";
+    this.getFieldId(name);
+    const error = this.errors[name];
+    const fieldValue = field.value ?? this.getFieldValue(name) ?? value;
+    return `
+      <div class="mojo-form-control">
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        <div class="multiselect-placeholder"
+             data-field-name="${name}"
+             data-field-type="multiselect"
+             data-field-config='${JSON.stringify({
+      name,
+      value: fieldValue,
+      placeholder,
+      maxHeight,
+      disabled,
+      required
+    })}'>
+          <input type="hidden" name="${name}" value="${this.escapeHtml(JSON.stringify(fieldValue))}">
+          <select class="form-select${error ? " is-invalid" : ""}" 
+                  multiple 
+                  ${disabled ? "disabled" : ""}
+                  ${required ? "required" : ""}>
+            ${options.map((opt) => {
+      const optValue = typeof opt === "string" ? opt : opt.value;
+      const optLabel = typeof opt === "string" ? opt : opt.label || opt.value;
+      const selected = Array.isArray(fieldValue) && fieldValue.includes(optValue) ? "selected" : "";
+      return `<option value="${this.escapeHtml(optValue)}" ${selected}>${this.escapeHtml(optLabel)}</option>`;
+    }).join("")}
+          </select>
+          <small class="form-text text-muted">This will be enhanced with MultiSelectDropdown component</small>
+        </div>
+        ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
+        ${error ? `<div class="${this.options.errorClass}">${this.escapeHtml(error)}</div>` : ""}
+      </div>
+    `;
+  }
   /**
    * Render checkbox field
    * @param {Object} field - Field configuration
@@ -2113,50 +2168,38 @@ class FormBuilder {
       name,
       label,
       value = "",
-      placeholder = "Select or type...",
-      options = [],
       required = false,
       disabled = false,
-      readonly = false,
-      allowCustom = true,
-      showDescription = true,
-      minChars = 0,
-      maxSuggestions = 10,
+      maxHeight = 300,
       help = field.helpText || field.help || ""
     } = field;
-    const fieldId = this.getFieldId(name);
+    const placeholder = field.placeholder || field.placeHolder || "Type or select...";
+    const allowCustom = field.allowCustom !== false;
+    this.getFieldId(name);
     const error = this.errors[name];
-    const fieldValue = this.getFieldValue(name) ?? value;
+    const fieldValue = field.value ?? this.getFieldValue(name) ?? value;
     return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
-        <div class="combo-input-placeholder"
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        <div class="combobox-placeholder"
              data-field-name="${name}"
-             data-field-type="combo"
+             data-field-type="combobox"
              data-field-config='${JSON.stringify({
       name,
       value: fieldValue,
       placeholder,
-      options,
+      maxHeight,
       allowCustom,
-      showDescription,
-      minChars,
-      maxSuggestions,
       disabled,
-      readonly,
       required
     })}'>
-          <input type="text"
-                 id="${fieldId}"
-                 name="${name}_display"
-                 class="${this.options.inputClass}${error ? " is-invalid" : ""}"
-                 placeholder="${this.escapeHtml(placeholder)}"
+          <input type="text" 
+                 class="form-control${error ? " is-invalid" : ""}"
                  value="${this.escapeHtml(fieldValue)}"
+                 placeholder="${this.escapeHtml(placeholder)}"
                  ${disabled ? "disabled" : ""}
-                 ${readonly ? "readonly" : ""}
                  ${required ? "required" : ""}>
-          <input type="hidden" name="${name}" value="${this.escapeHtml(fieldValue)}">
-          <small class="form-text text-muted">This will be enhanced with ComboInput component</small>
+          <small class="form-text text-muted">This will be enhanced with ComboBox component</small>
         </div>
         ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
         ${error ? `<div class="${this.options.errorClass}">${this.escapeHtml(error)}</div>` : ""}
@@ -4035,6 +4078,312 @@ class CollectionMultiSelectView extends View {
     this.setValue(value);
   }
 }
+class MultiSelectItemsView extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "multiselect-items",
+      template: `
+        {{#items.length}}
+          <div class="multiselect-list" style="max-height: {{maxHeight}}px; overflow-y: auto;">
+            {{#items}}
+              <div class="multiselect-item form-check px-3 py-2" 
+                   data-action="toggle"
+                   data-value="{{value}}"
+                   data-index="{{index}}">
+                <input type="checkbox" 
+                       class="form-check-input" 
+                       id="{{id}}"
+                       {{#selected}}checked{{/selected}}
+                       {{#disabled}}disabled{{/disabled}}>
+                <label class="form-check-label w-100" for="{{id}}">
+                  {{label}}
+                </label>
+              </div>
+            {{/items}}
+          </div>
+          <div class="multiselect-footer border-top p-2">
+            <button type="button" class="btn btn-sm btn-primary w-100" data-action="close-dropdown">
+              Done
+            </button>
+          </div>
+        {{/items.length}}
+        
+        {{^items.length}}
+          <div class="multiselect-empty text-muted text-center py-3">
+            <small>No options available</small>
+          </div>
+        {{/items.length}}
+      `,
+      ...options
+    });
+    this.items = options.items || [];
+    this.maxHeight = options.maxHeight || 300;
+  }
+  /**
+   * Handle item toggle
+   */
+  handleActionToggle(event, element) {
+    const value = element.getAttribute("data-value");
+    const index = parseInt(element.getAttribute("data-index"), 10);
+    const item = this.items[index];
+    if (!item || item.disabled) return;
+    item.selected = !item.selected;
+    const checkbox = element.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = item.selected;
+    }
+    this.emit("toggle", { value, index, selected: item.selected });
+  }
+  /**
+   * Handle close dropdown button
+   */
+  handleActionCloseDropdown(event, element) {
+    this.emit("close-dropdown");
+  }
+  /**
+   * Get currently selected values
+   */
+  getValue() {
+    return this.items.filter((item) => item.selected).map((item) => item.value);
+  }
+  /**
+   * Set selected values
+   */
+  setValue(values) {
+    const valueSet = new Set(Array.isArray(values) ? values : [values]);
+    this.items.forEach((item) => {
+      item.selected = valueSet.has(item.value);
+    });
+    this.render(false);
+  }
+  /**
+   * Update items and re-render
+   */
+  updateItems(items) {
+    this.items = items;
+    this.render(false);
+  }
+}
+class MultiSelectDropdown extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "multiselect-dropdown",
+      template: `
+        <div class="mojo-form-control">
+          {{#label}}
+          <label class="form-label">
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+          </label>
+          {{/label}}
+          
+          <div class="dropdown w-100">
+            <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center" 
+                    type="button" 
+                    data-bs-toggle="dropdown" 
+                    aria-expanded="false"
+                    {{#disabled}}disabled{{/disabled}}>
+              <span class="multiselect-button-text">{{buttonText}}</span>
+              <i class="bi bi-chevron-down"></i>
+            </button>
+            <div class="dropdown-menu w-100" data-bs-auto-close="outside" data-container="items"></div>
+          </div>
+          
+          {{#help}}
+            <div class="form-text">{{help}}</div>
+          {{/help}}
+          {{#error}}
+            <div class="invalid-feedback d-block">{{error}}</div>
+          {{/error}}
+        </div>
+      `,
+      ...options
+    });
+    this.name = options.name || "multiselect";
+    this.label = options.label || "";
+    this.help = options.help || "";
+    this.error = options.error || "";
+    this.required = options.required || false;
+    this.disabled = options.disabled || false;
+    this.placeholder = options.placeholder || options.placeHolder || "Select...";
+    this.maxHeight = options.maxHeight || 300;
+    this.showSelectedLabels = options.showSelectedLabels !== false;
+    this.maxLabelsToShow = options.maxLabelsToShow || 3;
+    this.options = options.options || [];
+    this.selectedValues = Array.isArray(options.value) ? options.value : [];
+    this.buttonText = this.computeButtonText();
+    this.listView = null;
+  }
+  /**
+   * Compute button text based on current selection
+   */
+  computeButtonText() {
+    const count = this.selectedValues.length;
+    if (count === 0) {
+      return this.placeholder || "Select...";
+    } else if (this.showSelectedLabels && count <= this.maxLabelsToShow) {
+      const labels = this.selectedValues.map((value) => {
+        const selectedOption = this.options.find((opt) => {
+          const optValue = typeof opt === "string" ? opt : opt.value;
+          return optValue === value;
+        });
+        return typeof selectedOption === "string" ? selectedOption : selectedOption?.label || selectedOption?.value || value;
+      });
+      return labels.join(", ");
+    } else {
+      return `${count} selected`;
+    }
+  }
+  /**
+   * Initialize child view after render
+   */
+  async onAfterRender() {
+    await super.onAfterRender();
+    this.createListView();
+  }
+  /**
+   * Create and mount the items list view
+   */
+  createListView() {
+    const container = this.element?.querySelector('[data-container="items"]');
+    if (!container) return;
+    const items = this.options.map((option, index) => {
+      const value = typeof option === "string" ? option : option.value;
+      const label = typeof option === "string" ? option : option.label || option.text || option.value;
+      const disabled = typeof option === "object" ? option.disabled : false;
+      return {
+        id: `${this.name}_${index}`,
+        value,
+        label,
+        index,
+        selected: this.selectedValues.includes(value),
+        disabled
+      };
+    });
+    this.listView = new MultiSelectItemsView({
+      items,
+      maxHeight: this.maxHeight
+    });
+    this.listView.on("toggle", (data) => {
+      this.handleToggle(data);
+    });
+    this.listView.on("close-dropdown", () => {
+      this.closeDropdown();
+    });
+    this.listView.render(true, container);
+  }
+  /**
+   * Close the dropdown programmatically
+   */
+  closeDropdown() {
+    const dropdownButton = this.element?.querySelector(".dropdown-toggle");
+    if (dropdownButton && window.bootstrap?.Dropdown) {
+      const dropdownInstance = window.bootstrap.Dropdown.getInstance(dropdownButton);
+      if (dropdownInstance) {
+        dropdownInstance.hide();
+      }
+    }
+  }
+  /**
+   * Handle item toggle
+   */
+  handleToggle(data) {
+    const { value, selected } = data;
+    if (selected) {
+      if (!this.selectedValues.includes(value)) {
+        this.selectedValues.push(value);
+      }
+    } else {
+      this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    }
+    this.updateButtonText();
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Update button text based on selection
+   */
+  updateButtonText() {
+    const button = this.element?.querySelector(".multiselect-button-text");
+    if (!button) return;
+    const count = this.selectedValues.length;
+    this.buttonText = this.computeButtonText();
+    button.textContent = this.buttonText;
+    if (count === 0) {
+      button.classList.add("text-muted");
+    } else {
+      button.classList.remove("text-muted");
+    }
+  }
+  /**
+   * Get current selected values
+   */
+  getValue() {
+    return this.selectedValues;
+  }
+  /**
+   * Set selected values
+   */
+  setValue(values) {
+    this.selectedValues = Array.isArray(values) ? values : values ? [values] : [];
+    if (this.listView) {
+      this.listView.setValue(this.selectedValues);
+    }
+    this.updateButtonText();
+  }
+  /**
+   * Update options list
+   */
+  setOptions(options) {
+    this.options = options;
+    if (this.listView) {
+      const items = this.options.map((option, index) => {
+        const value = typeof option === "string" ? option : option.value;
+        const label = typeof option === "string" ? option : option.label || option.text || option.value;
+        const disabled = typeof option === "object" ? option.disabled : false;
+        return {
+          id: `${this.name}_${index}`,
+          value,
+          label,
+          index,
+          selected: this.selectedValues.includes(value),
+          disabled
+        };
+      });
+      this.listView.updateItems(items);
+    }
+  }
+  /**
+   * Clear all selections
+   */
+  clear() {
+    this.setValue([]);
+  }
+  /**
+   * Get form value (for form integration)
+   */
+  getFormValue() {
+    return this.getValue();
+  }
+  /**
+   * Set form value (for form integration)
+   */
+  setFormValue(value) {
+    this.setValue(value);
+  }
+  /**
+   * Cleanup child view on destroy
+   */
+  async onBeforeDestroy() {
+    await super.onBeforeDestroy();
+    if (this.listView) {
+      this.listView.destroy();
+    }
+  }
+}
 class DatePicker extends View {
   constructor(options = {}) {
     const {
@@ -5773,6 +6122,240 @@ class ComboInput extends View {
     return new ComboInput(options);
   }
 }
+class ComboBox extends View {
+  constructor(options = {}) {
+    super(options);
+    this.name = options.name || "combo";
+    this.placeholder = options.placeholder || options.placeHolder || "Type or select...";
+    this.value = options.value || "";
+    this.options = options.options || [];
+    this.allowCustom = options.allowCustom !== false;
+    this.disabled = options.disabled || false;
+    this.required = options.required || false;
+    this.maxHeight = options.maxHeight || 300;
+    this.filteredOptions = [...this.options];
+    this.highlightedIndex = -1;
+    this.isOpen = false;
+    this.template = `
+      <div class="combobox-container">
+        <div class="input-group">
+          <input type="text" 
+                 class="form-control combobox-input" 
+                 placeholder="{{placeholder}}"
+                 value="{{value}}"
+                 {{#disabled}}disabled{{/disabled}}
+                 {{#required}}required{{/required}}
+                 data-action="combobox-input"
+                 autocomplete="off">
+          <button class="btn btn-outline-secondary combobox-toggle" 
+                  type="button"
+                  data-action="combobox-toggle"
+                  {{#disabled}}disabled{{/disabled}}>
+            <i class="bi bi-chevron-down"></i>
+          </button>
+        </div>
+        <div class="dropdown-menu combobox-dropdown" 
+             style="max-height: {{maxHeight}}px; overflow-y: auto; width: 100%;">
+          <div data-region="dropdown-items"></div>
+          {{^allowCustom}}
+          <div class="combobox-no-match dropdown-item text-muted" style="display: none;">
+            No matches found
+          </div>
+          {{/allowCustom}}
+        </div>
+      </div>
+    `;
+    this.itemTemplate = `
+      {{#items}}
+      <button type="button" 
+              class="dropdown-item combobox-item {{#highlighted}}active{{/highlighted}}"
+              data-action="select-item"
+              data-value="{{value}}"
+              data-index="{{index}}">
+        {{label}}
+      </button>
+      {{/items}}
+    `;
+  }
+  async onInit() {
+    await super.onInit();
+  }
+  async onAfterRender() {
+    await super.onAfterRender();
+    this.input = this.element.querySelector(".combobox-input");
+    this.dropdown = this.element.querySelector(".combobox-dropdown");
+    this.dropdownItems = this.element.querySelector('[data-region="dropdown-items"]');
+    this.noMatchDiv = this.element.querySelector(".combobox-no-match");
+    if (this.value && this.input) {
+      const option = this.options.find((opt) => opt.value === this.value);
+      if (option) {
+        this.input.value = option.label || option.value;
+      } else if (this.allowCustom) {
+        this.input.value = this.value;
+      }
+    }
+    this.renderItems();
+    this.setupEventListeners();
+  }
+  setupEventListeners() {
+    this.input.addEventListener("focus", () => this.openDropdown());
+    this.input.addEventListener("input", (e) => this.handleInput(e));
+    this.input.addEventListener("keydown", (e) => this.handleKeydown(e));
+    document.addEventListener("click", (e) => {
+      if (!this.element.contains(e.target)) {
+        this.closeDropdown();
+      }
+    });
+  }
+  handleInput(event) {
+    const searchText = event.target.value.toLowerCase();
+    this.filteredOptions = this.options.filter((opt) => {
+      const label = opt.label || opt.value;
+      return label.toLowerCase().includes(searchText);
+    });
+    this.highlightedIndex = -1;
+    this.renderItems();
+    this.openDropdown();
+    if (!this.allowCustom && this.noMatchDiv) {
+      this.noMatchDiv.style.display = this.filteredOptions.length === 0 ? "block" : "none";
+    }
+    this.value = event.target.value;
+    this.emit("change", { value: this.value });
+  }
+  handleKeydown(event) {
+    if (!this.isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      this.openDropdown();
+      event.preventDefault();
+      return;
+    }
+    if (!this.isOpen) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredOptions.length - 1);
+        this.renderItems();
+        this.scrollToHighlighted();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+        this.renderItems();
+        this.scrollToHighlighted();
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.highlightedIndex >= 0) {
+          this.selectItem(this.filteredOptions[this.highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.closeDropdown();
+        break;
+      case "Tab":
+        this.closeDropdown();
+        break;
+    }
+  }
+  scrollToHighlighted() {
+    if (this.highlightedIndex < 0) return;
+    const items = this.dropdownItems.querySelectorAll(".combobox-item");
+    const highlightedItem = items[this.highlightedIndex];
+    if (highlightedItem) {
+      highlightedItem.scrollIntoView({ block: "nearest" });
+    }
+  }
+  openDropdown() {
+    if (this.disabled || this.isOpen) return;
+    this.isOpen = true;
+    this.dropdown.classList.add("show");
+    if (this.input.value === "") {
+      this.filteredOptions = [...this.options];
+      this.renderItems();
+    }
+  }
+  closeDropdown() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.dropdown.classList.remove("show");
+    this.highlightedIndex = -1;
+    if (!this.allowCustom) {
+      const validOption = this.options.find(
+        (opt) => opt.value === this.input.value || opt.label === this.input.value
+      );
+      if (!validOption && this.input.value !== "") {
+        this.input.value = this.value;
+      }
+    }
+  }
+  selectItem(option) {
+    const value = option.value;
+    const label = option.label || option.value;
+    this.input.value = label;
+    this.value = value;
+    this.closeDropdown();
+    this.filteredOptions = [...this.options];
+    this.highlightedIndex = -1;
+    this.emit("change", { value: this.value, label });
+  }
+  renderItems() {
+    const items = this.filteredOptions.map((opt, index) => ({
+      value: opt.value,
+      label: opt.label || opt.value,
+      index,
+      highlighted: index === this.highlightedIndex
+    }));
+    const html = Mustache.render(this.itemTemplate, { items });
+    this.dropdownItems.innerHTML = html;
+  }
+  // Action handlers
+  async onActionComboboxInput(event, element) {
+  }
+  async onActionComboboxToggle(event, element) {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.input.focus();
+      this.openDropdown();
+    }
+  }
+  async onActionSelectItem(event, element) {
+    const value = element.getAttribute("data-value");
+    const option = this.options.find((opt) => opt.value === value);
+    if (option) {
+      this.selectItem(option);
+    }
+  }
+  // Form integration methods
+  getValue() {
+    return this.value;
+  }
+  setValue(value) {
+    this.value = value;
+    if (!this.input) {
+      return;
+    }
+    const option = this.options.find((opt) => opt.value === value);
+    if (option) {
+      this.input.value = option.label || option.value;
+    } else if (this.allowCustom) {
+      this.input.value = value;
+    }
+  }
+  setFormValue(value) {
+    this.setValue(value);
+  }
+  getTemplateData() {
+    return {
+      placeholder: this.placeholder,
+      value: this.input ? this.input.value : this.value,
+      disabled: this.disabled,
+      required: this.required,
+      maxHeight: this.maxHeight,
+      allowCustom: this.allowCustom
+    };
+  }
+}
 class FormView extends View {
   constructor(options = {}) {
     const {
@@ -5929,6 +6512,8 @@ class FormView extends View {
     this.initializeImageFields();
     this.initializeCustomComponents();
     this.initializeTagInputs();
+    this.initializeMultiSelectDropdowns();
+    this.initializeComboBoxes();
     this.initializeCollectionSelects();
     this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
@@ -6057,6 +6642,77 @@ class FormView extends View {
       }
     });
   }
+  /**
+   * Initialize MultiSelectDropdown components
+   */
+  initializeMultiSelectDropdowns() {
+    const multiselectPlaceholders = this.element.querySelectorAll('[data-field-type="multiselect"]');
+    multiselectPlaceholders.forEach((placeholder) => {
+      try {
+        const fieldName = placeholder.getAttribute("data-field-name");
+        const configData = placeholder.getAttribute("data-field-config");
+        const config = JSON.parse(configData);
+        const fieldConfig = this.getFormFieldConfig(fieldName);
+        if (!fieldConfig) {
+          return;
+        }
+        const multiselect = new MultiSelectDropdown({
+          ...config,
+          options: fieldConfig.options || [],
+          placeholder: fieldConfig.placeholder || config.placeholder || "Select...",
+          label: fieldConfig.label,
+          containerId: null
+          // We'll mount directly
+        });
+        let value = config.value ?? MOJOUtils.getContextData(this.data, fieldName);
+        if (value) {
+          multiselect.setFormValue(value);
+        }
+        multiselect.render(true, placeholder);
+        this.customComponents.set(fieldName, multiselect);
+        multiselect.on("change", (data) => {
+          this.handleFieldChange(fieldName, data.value);
+        });
+      } catch (error) {
+        console.error("MultiSelectDropdown initialization failed:", error);
+      }
+    });
+  }
+  /**
+   * Initialize ComboBox components (autocomplete dropdowns)
+   */
+  initializeComboBoxes() {
+    const comboboxPlaceholders = this.element.querySelectorAll('[data-field-type="combobox"]');
+    comboboxPlaceholders.forEach((placeholder) => {
+      try {
+        const fieldName = placeholder.getAttribute("data-field-name");
+        const configData = placeholder.getAttribute("data-field-config");
+        const config = JSON.parse(configData);
+        const fieldConfig = this.getFormFieldConfig(fieldName);
+        if (!fieldConfig) {
+          return;
+        }
+        const combobox = new ComboBox({
+          ...config,
+          options: fieldConfig.options || [],
+          placeholder: fieldConfig.placeholder || config.placeholder || "Type or select...",
+          containerId: null
+          // We'll mount directly
+        });
+        let value = config.value ?? MOJOUtils.getContextData(this.data, fieldName);
+        if (value) {
+          combobox.setFormValue(value);
+        }
+        combobox.render(true, placeholder);
+        this.customComponents.set(fieldName, combobox);
+        combobox.on("change", (data) => {
+          this.handleFieldChange(fieldName, data.value);
+        });
+      } catch (error) {
+        console.error("ComboBox initialization failed:", error);
+      }
+    });
+  }
   /**
    * Initialize CollectionSelect components
    */
@@ -7893,4 +8549,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-Xb_l8AD5.js.map
+//# sourceMappingURL=FormView-B_90L1RY.js.map