fix: input id to for

src/components/02_personnel-management/FormAddress.vue

@@ -82,7 +82,7 @@ watch(districtId, fetchSubDistrict);
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        id="input-address"
+        for="input-address"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -167,7 +167,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
-        id="input-zip-code"
+        for="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
@@ -182,7 +182,7 @@ watch(districtId, fetchSubDistrict);
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        id="input-address-en"
+        for="input-address-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -264,7 +264,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
-        id="input-zip-code"
+        for="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"

src/components/02_personnel-management/FormByType.vue

@@ -73,7 +73,7 @@ function deleteFile(name: string) {
       style="margin-left: 0px; padding-left: 0px"
     >
       <q-input
-        id="input-regis-no"
+        for="input-regis-no"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -86,6 +86,7 @@ function deleteFile(name: string) {
         utc
         autoApply
         v-model="startDate"
+        :teleport="true"
         :locale="'th'"
         :enableTimePicker="false"
         :disabled="readonly"
@@ -96,7 +97,7 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            id="input-start-date"
+            for="input-start-date"
             :label="$t('formDialogInputStartDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
@@ -129,6 +130,7 @@ function deleteFile(name: string) {
         utc
         autoApply
         v-model="retireDate"
+        :teleport="true"
         :locale="'th'"
         :enableTimePicker="false"
         :disabled="readonly"
@@ -139,7 +141,7 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            id="input-retire-date"
+            for="input-retire-date"
             :label="$t('formDialogInputRetireDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
@@ -192,7 +194,7 @@ function deleteFile(name: string) {
       style="row-gap: 16px"
     >
       <q-input
-        id="input-discount-condition"
+        for="input-discount-condition"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -260,7 +262,7 @@ function deleteFile(name: string) {
         :options="userStore.userOption.trainingPlaceOpts"
       />
       <q-input
-        id="input-checkpoint"
+        for="input-checkpoint"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -270,7 +272,7 @@ function deleteFile(name: string) {
         v-model="checkpoint"
       />
       <q-input
-        id="input-checkpoint-en"
+        for="input-checkpoint-en"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -280,7 +282,7 @@ function deleteFile(name: string) {
         v-model="checkpointEN"
       />
       <q-file
-        id="input-attchment"
+        for="input-attchment"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"

src/components/02_personnel-management/FormInformation.vue

@@ -73,7 +73,7 @@ async function selectHq(id: string) {
       :options="userStore.userOption.brOpts"
     />
     <q-input
-      id="input-username"
+      for="input-username"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"

src/components/02_personnel-management/FormPerson.vue

@@ -24,7 +24,7 @@ defineProps<{
   <div class="col-3 app-text-muted">• {{ $t('formDialogTitlePersonnel') }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
-      id="input-first-name"
+      for="input-first-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -38,7 +38,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-last-name"
+      for="input-last-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -50,7 +50,7 @@ defineProps<{
       :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
     />
     <q-input
-      id="input-first-name-en"
+      for="input-first-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -64,7 +64,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-last-name-en"
+      for="input-last-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -78,7 +78,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-telephone"
+      for="input-telephone"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -89,7 +89,7 @@ defineProps<{
       mask="##########"
     />
     <q-input
-      id="input-email"
+      for="input-email"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -158,7 +158,7 @@ defineProps<{
       </template>
     </VueDatePicker>
     <q-input
-      id="input-age"
+      for="input-age"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"