npm - @dragonmastery/zinia-forms-core - Versions diffs - 0.3.3 → 0.3.4 - Mend

@dragonmastery/zinia-forms-core 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -3983,6 +3983,7 @@ function createDaisyUIComboboxField() {
     const isTouched2 = formState.isTouched(props.name);
     const comboboxRoot = ref(null);
     const inputElement = ref(null);
+    const dropdownPanel = ref(null);
     const selectedIndex = computed({
       get: () => formState.getSelectedIndex(props.name),
       set: (value) => formState.setSelectedIndex(props.name, value)
@@ -4036,7 +4037,8 @@ function createDaisyUIComboboxField() {
       },
       onBlur: (event) => {
         const relatedTarget = event.relatedTarget;
-        if (comboboxRoot.value?.contains(relatedTarget)) {
+        const root = comboboxRoot.value || inputElement.value?.closest("label.floating-label");
+        if (root?.contains(relatedTarget)) {
           return;
         }
         const displayValue = String(displayText.value || "").trim();
@@ -4079,11 +4081,48 @@ function createDaisyUIComboboxField() {
               const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % totalOptions;
               selectedIndex.value = newIndex;
               nextTick(() => {
-                const selectedElement = comboboxRoot.value?.querySelector(
+                let panel = null;
+                if (dropdownPanel.value) {
+                  panel = dropdownPanel.value;
+                } else if (inputElement.value) {
+                  const comboboxContainer = inputElement.value.closest('[role="combobox"]');
+                  if (comboboxContainer) {
+                    panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
+                    if (!panel) {
+                      const listbox = comboboxContainer.querySelector("#combobox-listbox");
+                      if (listbox) {
+                        panel = listbox.parentElement;
+                      }
+                    }
+                  }
+                }
+                if (!panel) {
+                  const listbox = document.querySelector(`#combobox-listbox`);
+                  if (listbox) {
+                    panel = listbox.parentElement;
+                  }
+                }
+                if (!panel) {
+                  return;
+                }
+                const selectedElement = panel.querySelector(
                   newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
                 );
-                if (selectedElement) {
-                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                if (!selectedElement) {
+                  return;
+                }
+                const listElement = selectedElement.parentElement;
+                if (!listElement) {
+                  return;
+                }
+                const elementTop = selectedElement.offsetTop;
+                const elementHeight = selectedElement.offsetHeight;
+                const containerHeight = panel.clientHeight;
+                const containerScrollTop = panel.scrollTop;
+                if (elementTop < containerScrollTop) {
+                  panel.scrollTop = elementTop;
+                } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+                  panel.scrollTop = elementTop + elementHeight - containerHeight;
                 }
               });
             }
@@ -4098,11 +4137,48 @@ function createDaisyUIComboboxField() {
               const newIndex = currentIndex < 0 ? totalOptionsUp - 1 : (currentIndex - 1 + totalOptionsUp) % totalOptionsUp;
               selectedIndex.value = newIndex;
               nextTick(() => {
-                const selectedElement = comboboxRoot.value?.querySelector(
+                let panel = null;
+                if (dropdownPanel.value) {
+                  panel = dropdownPanel.value;
+                } else if (inputElement.value) {
+                  const comboboxContainer = inputElement.value.closest('[role="combobox"]');
+                  if (comboboxContainer) {
+                    panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
+                    if (!panel) {
+                      const listbox = comboboxContainer.querySelector("#combobox-listbox");
+                      if (listbox) {
+                        panel = listbox.parentElement;
+                      }
+                    }
+                  }
+                }
+                if (!panel) {
+                  const listbox = document.querySelector(`#combobox-listbox`);
+                  if (listbox) {
+                    panel = listbox.parentElement;
+                  }
+                }
+                if (!panel) {
+                  return;
+                }
+                const selectedElement = panel.querySelector(
                   newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
                 );
-                if (selectedElement) {
-                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                if (!selectedElement) {
+                  return;
+                }
+                const listElement = selectedElement.parentElement;
+                if (!listElement) {
+                  return;
+                }
+                const elementTop = selectedElement.offsetTop;
+                const elementHeight = selectedElement.offsetHeight;
+                const containerHeight = panel.clientHeight;
+                const containerScrollTop = panel.scrollTop;
+                if (elementTop < containerScrollTop) {
+                  panel.scrollTop = elementTop;
+                } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+                  panel.scrollTop = elementTop + elementHeight - containerHeight;
                 }
               });
             }
@@ -4171,7 +4247,7 @@ function createDaisyUIComboboxField() {
             children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
           }
         ) }),
-        showDropdown.value && /* @__PURE__ */ jsx("div", { class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", style: "min-width: 100%;", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
+        showDropdown.value && /* @__PURE__ */ jsx("div", { ref: dropdownPanel, class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", style: "min-width: 100%;", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
           filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
             "li",
             {