Merge pull request #216 from GeekGene/feat/initial-focus-dialogs

feat(ui): initial focus to input field / confirm button for all dialogs

ui/components.d.ts

@@ -47,7 +47,6 @@ declare module 'vue' {
     CreatorsListDialog: typeof import('./src/components/CreatorsListDialog.vue')['default']
     EditAgentProfileDialog: typeof import('./src/components/EditAgentProfileDialog.vue')['default']
     FollowersListDialog: typeof import('./src/components/FollowersListDialog.vue')['default']
-    HoloLogin: typeof import('./src/components/HoloLogin.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchEverythingDialog: typeof import('./src/components/SearchEverythingDialog.vue')['default']

ui/src/components/BaseConfirmDialog.vue

@@ -2,6 +2,7 @@
   <BaseDialog
     :model-value="modelValue"
     dialog-panel-class="md:w-auto"
+    :initial-focus-ref="confirmButtonRef"
     @update:model-value="(val: boolean) => emit('update:model-value', val)"
   >
     <div class="font-title text-xl flex justify-start items-center px-4 mr-2">
@@ -18,6 +19,7 @@
         Cancel
       </button>
       <button
+        ref="confirmButtonRef"
         class="btn btn-md btn-success"
         @click="
           () => {
@@ -33,12 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  Dialog,
-  DialogPanel,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
+import BaseDialog from "./BaseDialog.vue";
+import { ref } from "vue";
 
 const emit = defineEmits(["confirm", "update:model-value"]);
 withDefaults(
@@ -54,4 +52,6 @@ withDefaults(
     title: undefined,
   }
 );
+
+const confirmButtonRef = ref();
 </script>

ui/src/components/BaseDialog.vue

@@ -4,6 +4,7 @@
       as="div"
       class="relative z-20 w-full"
       :open="modelValue"
+      :initial-focus="initialFocusRef"
       @close="emit('update:model-value', false)"
     >
       <TransitionChild
@@ -35,6 +36,7 @@
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <DialogPanel
+              ref="dialogPanelRef"
               class="relative transform overflow-visible bg-base-100 rounded-3xl transition-all w-full p-2 md:p-8 md:w-2/3"
               :class="dialogPanelClass"
             >
@@ -54,15 +56,16 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
-
 const emit = defineEmits(["update:model-value"]);
 withDefaults(
   defineProps<{
     modelValue: boolean;
     dialogPanelClass?: string;
+    initialFocusRef?: HTMLElement;
   }>(),
   {
     dialogPanelClass: "",
+    initialFocusRef: undefined,
   }
 );
 </script>

ui/src/components/BaseEditAgentProfileForm.vue

@@ -13,6 +13,7 @@
           <span class="label-text">Nickname *</span>
         </label>
         <input
+          ref="usernameInputRef"
           v-model="nickname"
           type="text"
           class="input input-bordered w-full input-lg"
@@ -68,6 +69,7 @@ const props = defineProps<{
 }>();
 const { showMessage } = useToasts();
 
+const usernameInputRef = ref();
 const avatar = ref(props.modelValue?.fields.avatar || "");
 const nickname = ref(props.modelValue?.nickname || "");
 const displayName = ref(

ui/src/components/CreateMewDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <BaseDialog
     :model-value="modelValue"
+    :initial-focus-ref="createMewInputRef?.$refs.mewContainerInput"
     @update:model-value="(val: boolean) => emit('update:model-value', val)"
   >
     <profiles-context :store="profilesStore">
@@ -36,7 +37,11 @@
         />
       </div>
 
-      <CreateMewInput :mew-type="mewType" @mew-created="onCreateMew" />
+      <CreateMewInput
+        ref="createMewInputRef"
+        :mew-type="mewType"
+        @mew-created="onCreateMew"
+      />
     </profiles-context>
   </BaseDialog>
 </template>
@@ -47,7 +52,7 @@ import CreateMewInput from "@/components/CreateMewInput.vue";
 import BaseAgentProfileName from "@/components/BaseAgentProfileName.vue";
 import BaseDialog from "@/components/BaseDialog.vue";
 import { Profile, ProfilesStore } from "@holochain-open-dev/profiles";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, inject, ref } from "vue";
 import { ROUTES } from "@/router";
 import { useRouter } from "vue-router";
 import { setHomeRedirect } from "@/utils/homeRedirect";
@@ -70,6 +75,8 @@ const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const router = useRouter();
 
+const createMewInputRef = ref();
+
 const onCreateMew = (val: FeedMew) => {
   setHomeRedirect(false);
 

ui/src/components/CreateProfileIfNotFoundDialog.vue

@@ -2,6 +2,7 @@
   <BaseDialog
     :model-value="modelValue"
     dialog-panel-class="md:w-auto bg-base-100"
+    :initial-focus-ref="baseEditAgentProfileFormRef?.$refs.usernameInputRef"
     @update:model-value="(val: boolean) => emit('update:model-value', val)"
   >
     <profiles-context :store="profilesStore">
@@ -11,15 +12,18 @@
         >
           create profile
         </h2>
-        <BaseEditAgentProfileForm @update:model-value="createProfile" />
+        <BaseEditAgentProfileForm
+          ref="baseEditAgentProfileFormRef"
+          @update:model-value="createProfile"
+        />
       </div>
       <slot v-else></slot>
     </profiles-context>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, inject, ref } from "vue";
 import { Profile, ProfilesStore } from "@holochain-open-dev/profiles";
 import BaseEditAgentProfileForm from "@/components/BaseEditAgentProfileForm.vue";
 
@@ -31,6 +35,8 @@ defineProps<{
   modelValue: boolean;
 }>();
 
+const baseEditAgentProfileFormRef = ref();
+
 const createProfile = async (profile: Profile) => {
   console.log("createPRofile", profile);
   await profilesStore.client.createProfile(profile);

ui/src/components/EditAgentProfileDialog.vue

@@ -2,6 +2,7 @@
   <BaseDialog
     :model-value="modelValue"
     dialog-panel-class="md:w-auto bg-base-100"
+    :initial-focus-ref="baseEditAgentProfileFormRef?.$refs.usernameInputRef"
     @update:model-value="(val: boolean) => emit('update:model-value', val)"
   >
     <div>
@@ -12,6 +13,7 @@
           edit profile
         </h2>
         <BaseEditAgentProfileForm
+          ref="baseEditAgentProfileFormRef"
           :model-value="profile"
           :profile="profile"
           @update:model-value="update"
@@ -23,7 +25,7 @@
 
 <script setup lang="ts">
 import { Profile, ProfilesStore } from "@holochain-open-dev/profiles";
-import { ComputedRef, inject } from "vue";
+import { ComputedRef, inject, ref } from "vue";
 import BaseEditAgentProfileForm from "@/components/BaseEditAgentProfileForm.vue";
 import { useToasts } from "@/stores/toasts";
 
@@ -35,6 +37,7 @@ const emit = defineEmits(["update:model-value", "profile-updated"]);
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const { showError } = useToasts();
+const baseEditAgentProfileFormRef = ref();
 
 const update = async (newProfile: Profile) => {
   try {

ui/src/components/SearchEverythingDialog.vue

@@ -4,6 +4,7 @@
       as="div"
       class="relative z-20"
       :open="modelValue"
+      :initial-focus="searchEverythingDialogInputRef?.$refs.inputFieldRef"
       @close="emit('update:model-value', false)"
     >
       <TransitionChild
@@ -36,6 +37,7 @@
           >
             <DialogPanel class="w-full sm:max-w-screen-sm">
               <SearchEverythingDialogInput
+                ref="searchEverythingDialogInputRef"
                 @selected="
                   (val) => {
                     router.push(val);
@@ -59,10 +61,13 @@ import {
 } from "@headlessui/vue";
 import SearchEverythingDialogInput from "@/components/SearchEverythingDialogInput.vue";
 import { useRouter } from "vue-router";
+import { ref } from "vue";
 
 defineProps<{
   modelValue: boolean;
 }>();
 const emit = defineEmits(["update:model-value"]);
 const router = useRouter();
+
+const searchEverythingDialogInputRef = ref();
 </script>

ui/src/components/SearchEverythingDialogInput.vue

@@ -8,6 +8,7 @@
           <IconSearch class="text-3xl mr-4" />
           <ComboboxInput
             id="searcheverythinginput"
+            ref="inputFieldRef"
             class="font-title uppercase bg-transparent border-0 outline-none w-full"
             aria-placeholder="Sniff Around"
             placeholder="sniff around"
@@ -112,6 +113,7 @@ const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
 const { showError } = useToasts();
 
+const inputFieldRef = ref();
 const searching = ref(false);
 const results = ref<SearchResultOption[]>([]);
 const selection = ref<SearchResultOption>();

ui/src/layouts/MainLayout.vue

@@ -73,7 +73,7 @@ import CreateMewInput from "@/components/CreateMewInput.vue";
 import BaseSiteMenu from "@/components/BaseSiteMenu.vue";
 import SearchEverythingDialog from "@/components/SearchEverythingDialog.vue";
 import { ROUTES } from "@/router";
-import { FeedMew, MewTypeName, PaginationDirectionName } from "@/types/types";
+import { FeedMew, MewTypeName } from "@/types/types";
 import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
 import { ComputedRef, inject, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";