fix: fix important date form (#6722)

monicahq · Jun 28, 2023 · 46f4713 · 46f4713
1 parent 1ed8d98
commit 46f4713
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue
@@ -17,8 +17,8 @@ const props = defineProps({
   data: Object,
 });
 
-const age = ref(null);
-const month = ref(null);
+const ageInput = ref(null);
+const monthInput = ref(null);
 const label = ref(null);
 const loadingState = ref(null);
 
@@ -62,10 +62,10 @@ const reset = () => {
 };
 
 const showAge = () => {
-  nextTick().then(() => age.value.focus());
+  nextTick().then(() => ageInput.value.focus());
 };
 const showMonth = () => {
-  nextTick().then(() => month.value.focus());
+  nextTick().then(() => monthInput.value.focus());
 };
 
 const submit = () => {
@@ -184,10 +184,10 @@ defineExpose({
         </div>
         <div v-show="form.choice === 'month_day'" class="ms-6 flex">
           <Dropdown
-            ref="month"
+            ref="monthInput"
             v-model.number="form.month"
             :data="data.months"
-            :required="true"
+            :required="form.choice === 'month_day'"
             :class="'mb-5 me-2'"
             :placeholder="$t('Choose a value')"
             :dropdown-class="'block w-full'"
@@ -196,7 +196,7 @@ defineExpose({
           <Dropdown
             v-model.number="form.day"
             :data="data.days"
-            :required="true"
+            :required="form.choice === 'month_day'"
             :class="'mb-5'"
             :placeholder="$t('Choose a value')"
             :dropdown-class="'block w-full'"
@@ -219,14 +219,13 @@ defineExpose({
         </div>
         <div v-show="form.choice === 'year'" class="ms-6">
           <TextInput
-            ref="age"
+            ref="ageInput"
             v-model.number="form.age"
             :type="'number'"
             :min="0"
             :max="120"
-            :autofocus="true"
             :input-class="'block'"
-            :required="true"
+            :required="form.choice === 'year'"
             :autocomplete="false" />
         </div>
       </div>

diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
@@ -59,7 +59,9 @@ const change = (event) => {
 };
 
 defineExpose({
-  focus: () => input.value.focus(),
+  focus: () => {
+    input.value.focus();
+  },
 });
 </script>
 

diff --git a/resources/js/Shared/Form/TextInput.vue b/resources/js/Shared/Form/TextInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 const props = defineProps({
   id: {
@@ -62,13 +62,20 @@ const localInputClasses = computed(() => {
   ];
 });
 
+onMounted(() => {
+  if (props.autofocus) {
+    focus();
+  }
+});
+
 const sendEscKey = () => {
   emit('esc-key-pressed');
 };
+const focus = () => {
+  input.value.focus();
+};
 
-defineExpose({
-  focus: () => input.value.focus(),
-});
+defineExpose({ focus: focus });
 </script>
 
 <template>