@antelopejs/dms 0.7.3 → 0.7.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.7.4
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.3...v0.7.4)
+
+### 🩹 Fixes
+
+- **table-view:** Open the toolbar search from its button again ([#193](https://github.com/AntelopeJS/dms/pull/193))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.7.3
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.2...v0.7.3)

package/frontend-vue/layers/dms-ui/app/build/components/table/Actions.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Data">
-import { injectLocal, useFocus, useFocusWithin } from "@vueuse/core";
+import { injectLocal, useFocusWithin } from "@vueuse/core";
 import { tv } from "tailwind-variants";
-import type { ShallowRef } from "vue";
+import { nextTick, type ShallowRef } from "vue";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 
 import TableMenu from "./Menu.vue";
@@ -162,7 +162,6 @@ const searchActive = ref(false);
 const searchInputRef = ref<HTMLInputElement>();
 const searchSectionRef = ref<HTMLElement>();
 
-const { focused: inputFocus } = useFocus(searchInputRef);
 const { focused: searchAreaFocused } = useFocusWithin(searchSectionRef);
 
 // A search set from outside (a view opened) shows in its field.
@@ -183,16 +182,17 @@ tableSharedData.onFiltersCleared(() => {
   if (!searchAreaFocused.value) searchActive.value = false;
 });
 
-watch(searchAreaFocused, (isFocused) => {
+// Opening the search unmounts the trigger button that held the focus: the
+// area reads as left for a moment, until the field takes the focus. Only an
+// area still left once the field rendered folds the search back.
+watch(searchAreaFocused, async (isFocused) => {
   if (isFocused || !searchActive.value) return;
+  await nextTick();
+  if (searchAreaFocused.value || !searchActive.value) return;
   if (tableSharedData?.globalFilterState.value) return;
   searchActive.value = false;
 });
 
-const toggleSearch = () => {
-  searchActive.value = !searchActive.value;
-  inputFocus.value = !inputFocus.value;
-};
 
 const searchFieldRef = ref<{ $el: HTMLElement }>();
 
@@ -205,6 +205,12 @@ const focusSearchBar = () => {
     ?.focus();
 };
 
+const openSearch = async () => {
+  searchActive.value = true;
+  await nextTick();
+  focusSearchBar();
+};
+
 const searchPlaceholderText = computed(() =>
   props.searchPlaceholder
     ? processI18n(props.searchPlaceholder)
@@ -426,7 +432,7 @@ const uiTableActions = computed(() => uiTableActionsVariant());
           square
           :aria-label="t('dms.table.search_open')"
           :class="uiTableActions.trigger()"
-          @click="toggleSearch"
+          @click="openSearch"
         />
 
         <div :class="uiTableActions.searchContainer({ searchActive })">

package/frontend-vue/tests/table-actions-search-label.test.ts

@@ -37,8 +37,13 @@ const ButtonStub = defineComponent({
       h("button", slots.default?.()),
 });
 
+// A real UInput wraps its field: the toolbar focuses the input inside it.
 const InputStub = defineComponent({
-  setup: () => () => h("input"),
+  inheritAttrs: false,
+  setup:
+    (_, { attrs }) =>
+    () =>
+      h("div", [h("input", attrs)]),
 });
 
 let app: App | undefined;
@@ -88,6 +93,7 @@ function mountActions(searchPlaceholder: string | undefined, search = "") {
     app.component(name, stub);
   }
   const container = document.createElement("div");
+  document.body.append(container);
   app.mount(container);
   return container;
 }
@@ -110,6 +116,7 @@ beforeEach(() => {
 afterEach(() => {
   app?.unmount();
   app = undefined;
+  document.body.replaceChildren();
   vi.unstubAllGlobals();
 });
 
@@ -121,6 +128,20 @@ describe("table toolbar search", () => {
     );
   });
 
+  it("opens the search field from its button and focuses it", async () => {
+    const container = mountActions(undefined);
+    const trigger = container.querySelector("button");
+    trigger?.focus();
+    trigger?.click();
+    await nextTick();
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+    expect(document.activeElement).toBe(input);
+    await nextTick();
+    expect(container.querySelector("input")).not.toBeNull();
+  });
+
   it("uses the configured placeholder, which also names the field", async () => {
     const container = mountActions("$page.members.search", "ada");
     await nextTick();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"