fix: fix vue refs targets (again) (#6676)

monicahq · Jun 13, 2023 · 7b8997c · 7b8997c
1 parent 133e426
commit 7b8997c
Show file tree

Hide file tree

Showing 58 changed files with 140 additions and 181 deletions.
diff --git a/resources/js/Components/Input.vue b/resources/js/Components/Input.vue
@@ -8,7 +8,7 @@ defineProps({
 defineEmits(['update:modelValue']);
 
 const input = ref(null);
-const focus = () => nextTick(() => input.value.focus());
+const focus = () => nextTick().then(() => input.value.focus());
 
 onMounted(() => {
   if (input.value.hasAttribute('autofocus')) {

diff --git a/resources/js/Components/Jetstream/ConfirmsPassword.vue b/resources/js/Components/Jetstream/ConfirmsPassword.vue
@@ -41,7 +41,7 @@ const startConfirmingPassword = () => {
     } else {
       confirmingPassword.value = true;
 
-      nextTick(() => passwordInput.value.focus());
+      nextTick().then(() => passwordInput.value.focus());
     }
   });
 };
@@ -62,7 +62,7 @@ const confirmPassword = () => {
     .catch((error) => {
       form.processing = false;
       form.error = error.response.data.errors.password[0];
-      nextTick(() => passwordInput.value.focus());
+      nextTick().then(() => passwordInput.value.focus());
     });
 };
 

diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
@@ -82,7 +82,7 @@ const close = () => {
 onMounted(() => {
   document.addEventListener('keydown', onKeydown);
   if (_.find(useAttrs(), (item, key) => key === 'autofocus') > -1) {
-    nextTick(() => {
+    nextTick().then(() => {
       select.value.focus();
       open.value = true;
     });

diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -18,14 +18,14 @@ const form = useForm({
 const confirmUserDeletion = () => {
   confirmingUserDeletion.value = true;
 
-  nextTick(() => passwordInput.value.focus());
+  nextTick().then(() => passwordInput.value.focus());
 };
 
 const deleteUser = () => {
   form.delete(route('current-user.destroy'), {
     preserveScroll: true,
     onSuccess: () => closeModal(),
-    onError: () => nextTick(() => passwordInput.value.focus()),
+    onError: () => nextTick().then(() => passwordInput.value.focus()),
     onFinish: () => form.reset(),
   });
 };

diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -23,14 +23,14 @@ const form = useForm({
 const confirmLogout = () => {
   confirmingLogout.value = true;
 
-  nextTick(() => passwordInput.value.focus());
+  nextTick().then(() => passwordInput.value.focus());
 };
 
 const logoutOtherBrowserSessions = () => {
   form.delete(route('other-browser-sessions.destroy'), {
     preserveScroll: true,
     onSuccess: () => closeModal(),
-    onError: () => nextTick(() => passwordInput.value.focus()),
+    onError: () => nextTick().then(() => passwordInput.value.focus()),
     onFinish: () => form.reset(),
   });
 };

diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -22,7 +22,7 @@
 
         <!-- content -->
         <text-input
-          :ref="'content'"
+          ref="content"
           v-model="form.content"
           :label="$t('Which email address should we send the notification to?')"
           :type="'email'"

diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newAddressType'"
+              ref="newAddressType"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -88,7 +88,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newCallReasonType'"
+              ref="newCallReasonType"
               v-model="form.callReasonTypeName"
               :label="$t('Name')"
               :type="'text'"
@@ -232,7 +232,7 @@
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'newReason'"
+                  ref="newReason"
                   v-model="form.label"
                   :label="$t('Name')"
                   :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -70,7 +70,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newContactInformationType'"
+              ref="newContactInformationType"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newGender'"
+              ref="newGender"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newGiftOccasion'"
+              ref="newGiftOccasion"
               v-model="form.label"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newGiftState'"
+              ref="newGiftState"
               v-model="form.label"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -94,7 +94,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newGroupType'"
+              ref="newGroupType"
               v-model="form.label"
               :label="$t('Name')"
               :type="'text'"
@@ -221,7 +221,7 @@
                             <errors :errors="form.errors" />
 
                             <text-input
-                              :ref="'newRole'"
+                              ref="newRole"
                               v-model="form.label"
                               :label="$t('Name')"
                               :type="'text'"
@@ -260,7 +260,7 @@
                         <errors :errors="form.errors" />
 
                         <text-input
-                          :ref="'newRole'"
+                          ref="newRole"
                           v-model="form.label"
                           :label="$t('Name')"
                           :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newPetCategory'"
+              ref="newPetCategory"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -94,7 +94,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newPostTemplate'"
+              ref="newPostTemplate"
               v-model="form.label"
               :label="$t('Name')"
               :type="'text'"
@@ -227,7 +227,7 @@
                             <errors :errors="form.errors" />
 
                             <text-input
-                              :ref="'newSection'"
+                              ref="newSection"
                               v-model="form.label"
                               :label="$t('Name')"
                               :type="'text'"
@@ -268,7 +268,7 @@
                         <errors :errors="form.errors" />
 
                         <text-input
-                          :ref="'newSection'"
+                          ref="newSection"
                           v-model="form.label"
                           :label="$t('Name')"
                           :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newPronoun'"
+              ref="newPronoun"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -107,7 +107,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newGroupType'"
+              ref="newGroupType"
               v-model="form.relationshipGroupTypeName"
               :label="$t('Name')"
               :type="'text'"
@@ -287,7 +287,7 @@
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'newRelationshipType'"
+                  ref="newRelationshipType"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -68,7 +68,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newReligion'"
+              ref="newReligion"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -103,7 +103,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'newTemplate'"
+              ref="newTemplate"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"

diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -120,7 +120,7 @@
         <errors :errors="form.errors" />
 
         <text-input
-          :ref="'newPage'"
+          ref="newPage"
           v-model="form.name"
           :label="$t('Name')"
           :type="'text'"

diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -31,9 +31,7 @@ const enableEditMode = () => {
 const focusNameOrder = () => {
   disableNameOrder.value = false;
 
-  nextTick(() => {
-    nameOrder.value.focus();
-  });
+  nextTick().then(() => nameOrder.value.focus());
 };
 
 const helpDocumentation = () => {
@@ -202,7 +200,7 @@ const submit = () => {
         </div>
         <div class="ms-8">
           <text-input
-            :ref="'nameOrder'"
+            ref="nameOrder"
             v-model="form.nameOrder"
             :type="'text'"
             :autofocus="true"

diff --git a/resources/js/Pages/Vault/Contact/Goals/Show.vue b/resources/js/Pages/Vault/Contact/Goals/Show.vue
@@ -71,7 +71,7 @@
 
                 <!-- name -->
                 <text-input
-                  :ref="'newName'"
+                  ref="newName"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"

diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -23,13 +23,13 @@ const errors = ref(null);
 const showCreateModal = () => {
   createDateModalShown.value = true;
 
-  nextTick(() => createForm.value.reset());
+  nextTick().then(() => createForm.value.reset());
 };
 
-const updateDateModal = (date, i) => {
+const updateDateModal = (date) => {
   editedDateId.value = date.id;
 
-  nextTick(() => editForm.value[i].reset());
+  nextTick().then(() => editForm.value[0].reset());
 };
 
 const created = (date) => {
@@ -123,18 +123,18 @@ const destroy = (date) => {
         <CreateOrEditImportantDate
           v-if="createDateModalShown"
           class="mb-6"
-          :ref="'createForm'"
+          ref="createForm"
           :data="data"
           @close="createDateModalShown = false"
           @created="created" />
 
-        <div v-else>
+        <div v-if="!createDateModalShown">
           <!-- list of dates -->
           <ul
             v-if="localDates.length > 0"
             class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
-              v-for="(date, i) in localDates"
+              v-for="date in localDates"
               :key="date.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <!-- detail of the important date -->
@@ -151,7 +151,7 @@ const destroy = (date) => {
 
                 <!-- actions -->
                 <ul class="text-sm">
-                  <li class="me-4 inline cursor-pointer" @click="updateDateModal(date, i)">
+                  <li class="me-4 inline cursor-pointer" @click="updateDateModal(date)">
                     <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                   </li>
                   <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(date)">
@@ -162,9 +162,9 @@ const destroy = (date) => {
 
               <!-- edit date modal -->
               <CreateOrEditImportantDate
-                :ref="'editForm'"
+                ref="editForm"
                 :date="date"
-                v-show="editedDateId === date.id"
+                v-if="editedDateId === date.id"
                 :data="data"
                 @close="editedDateId = 0"
                 @update:date="updated" />