vueless 1.4.12-beta.15 → 1.4.12-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.15",
+  "version": "1.4.12-beta.16",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.form-date-picker/UDatePicker.vue

@@ -119,6 +119,16 @@ function deactivate() {
   customView.value = View.Day;
 }
 
+function deactivateOnBlur(event: FocusEvent) {
+  const related = event.relatedTarget as HTMLElement | null;
+
+  if (related && wrapperRef.value?.contains(related)) {
+    return;
+  }
+
+  deactivate();
+}
+
 function onUserFormatDateChange(value: string) {
   userFormatDate.value = value.trim();
 }
@@ -279,7 +289,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()" @focusout="deactivateOnBlur">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -356,6 +356,53 @@ describe("UDatePicker.vue", () => {
       expect(calendar.isVisible()).toBe(true);
     });
 
+    it("Calendar – hides when focus leaves the whole component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      const outsideElement = document.createElement("button");
+
+      document.body.appendChild(outsideElement);
+
+      await component.trigger("focusout", { relatedTarget: outsideElement });
+
+      expect(calendar.isVisible()).toBe(false);
+
+      outsideElement.remove();
+      component.unmount();
+    });
+
+    it("Calendar – stays open when focus moves inside the component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      await component.trigger("focusout", { relatedTarget: calendar.element });
+
+      expect(calendar.isVisible()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Calendar – hides when escape key is pressed on calendar", async () => {
       const component = mount(UDatePicker, {
         props: {

package/ui.form-listbox/UListbox.vue

@@ -580,6 +580,7 @@ const {
         <UButton
           round
           square
+          tabindex="-1"
           v-bind="addOptionButtonAttrs"
           :data-test="getDataTest('add-button')"
           @click="onClickAddOption"

package/ui.form-select/USelect.vue

@@ -556,7 +556,7 @@ const {
 
     <div
       ref="wrapper"
-      :tabindex="searchable || disabled ? -1 : 0"
+      :tabindex="disabled ? -1 : searchable && isOpen ? -1 : 0"
       role="combobox"
       :aria-expanded="ariaExpanded"
       aria-haspopup="listbox"

package/ui.form-select/tests/USelect.test.ts

@@ -255,6 +255,63 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("searchable")).toBe(true);
     });
 
+    it("Searchable – closes when the search input blurs to an outside element", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      expect(component.emitted("open")).toBeTruthy();
+
+      const outside = document.createElement("button");
+
+      document.body.appendChild(outside);
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: outside });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeTruthy();
+      expect(component.findComponent(UListbox).exists()).toBe(false);
+
+      outside.remove();
+      component.unmount();
+    });
+
+    it("Searchable – stays open when focus moves within its own listbox", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      const listboxEl = component.getComponent(UListbox).element as HTMLElement;
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: listboxEl });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeFalsy();
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Search v-model – passes search to UListbox and filters", async () => {
       const component = mount(USelect, {
         props: {