From fb3b58fe032c6cf0b48fe03153e746c303ba5eed Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 22 Aug 2024 10:37:30 +0530
Subject: [PATCH] Implemented: support to add focus on first input element
 inside mapping modals(#132)

---
 src/components/CustomMappingModal.vue          |  2 +-
 src/components/FacilityAddressModal.vue        |  2 +-
 src/components/FacilityExternalIdModal.vue     |  2 +-
 src/components/FacilityMappingModal.vue        |  2 +-
 src/components/FacilityMappingPopover.vue      | 16 ++++++++++++----
 src/components/FacilityShopifyMappingModal.vue |  2 +-
 src/views/FacilityDetails.vue                  | 16 ++++++++++++----
 7 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/CustomMappingModal.vue b/src/components/CustomMappingModal.vue
index 97b3c552..ec584979 100644
--- a/src/components/CustomMappingModal.vue
+++ b/src/components/CustomMappingModal.vue
@@ -26,7 +26,7 @@
       <ion-list>
         <ion-list-header>{{ translate("Custom mapping") }}</ion-list-header>
         <ion-item>
-          <ion-input :label="translate('Mapping ID')" v-model="mappingId" placeholder="Mapping ID" />
+          <ion-input id="inputElement" :label="translate('Mapping ID')" v-model="mappingId" placeholder="Mapping ID" />
         </ion-item>
         <ion-item>
           <ion-input :label="translate('Mapping Name')" v-model="mappingName" placeholder="Mapping name" />
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
index c105234e..38a35a78 100644
--- a/src/components/FacilityAddressModal.vue
+++ b/src/components/FacilityAddressModal.vue
@@ -16,7 +16,7 @@
         <ion-label>{{ translate("Address") }}</ion-label>
       </ion-item-divider>
       <ion-item>
-        <ion-input :label="translate('Shipping name')" label-placement="floating" v-model="address.toName" />
+        <ion-input id="inputElement" :label="translate('Shipping name')" label-placement="floating" v-model="address.toName" />
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="address.address1">
diff --git a/src/components/FacilityExternalIdModal.vue b/src/components/FacilityExternalIdModal.vue
index 90e483a8..0f4c6c21 100644
--- a/src/components/FacilityExternalIdModal.vue
+++ b/src/components/FacilityExternalIdModal.vue
@@ -27,7 +27,7 @@
       <ion-list>
         <ion-list-header>{{ translate('Facility External ID') }}</ion-list-header>
         <ion-item>
-          <ion-input :label="translate('Identification')" v-model="currentFacility.externalId" />
+          <ion-input id="inputElement" :label="translate('Identification')" v-model="currentFacility.externalId" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/FacilityMappingModal.vue b/src/components/FacilityMappingModal.vue
index f2e96cb0..eca36c91 100644
--- a/src/components/FacilityMappingModal.vue
+++ b/src/components/FacilityMappingModal.vue
@@ -27,7 +27,7 @@
       <ion-list>
         <ion-list-header>{{ externalMappingTypes[mappingId] }}</ion-list-header>
         <ion-item>
-          <ion-input :label="translate('Identification')" v-model="mappingValue" placeholder="Mapping Value" />
+          <ion-input id="inputElement" :label="translate('Identification')" v-model="mappingValue" placeholder="Mapping Value" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/FacilityMappingPopover.vue b/src/components/FacilityMappingPopover.vue
index 2cca69ca..fcdcd971 100644
--- a/src/components/FacilityMappingPopover.vue
+++ b/src/components/FacilityMappingPopover.vue
@@ -55,7 +55,9 @@ export default defineComponent({
       })
 
       await popoverController.dismiss()
-      customMappingModal.present()
+      customMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async addMappingModal(type: any) {
       const addMappingModal = await modalController.create({
@@ -64,7 +66,9 @@ export default defineComponent({
       })
   
       await popoverController.dismiss()
-      addMappingModal.present()
+      addMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async createShopifyFacilityMappingModal() {
       const facilityShopifyMappingModal = await modalController.create({
@@ -72,7 +76,9 @@ export default defineComponent({
       })
   
       await popoverController.dismiss()
-      facilityShopifyMappingModal.present()
+      facilityShopifyMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async createFacilityExternalId() {
       const facilityExternalIdModal = await modalController.create({
@@ -80,7 +86,9 @@ export default defineComponent({
       })
 
       await popoverController.dismiss()
-      facilityExternalIdModal.present()
+      facilityExternalIdModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
   },
   setup() {
diff --git a/src/components/FacilityShopifyMappingModal.vue b/src/components/FacilityShopifyMappingModal.vue
index 43b87142..aaaae6b8 100644
--- a/src/components/FacilityShopifyMappingModal.vue
+++ b/src/components/FacilityShopifyMappingModal.vue
@@ -36,7 +36,7 @@
           </ion-select>
         </ion-item>
         <ion-item>
-          <ion-input :label="translate('Location ID')" :placeholder="translate('Add your location ID from Shopify')" v-model="shopifyLocationId" />
+          <ion-input id="inputElement" :label="translate('Location ID')" :placeholder="translate('Add your location ID from Shopify')" v-model="shopifyLocationId" />
         </ion-item>
       </ion-list>
 
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index e2e398c9..15616f3b 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -743,7 +743,9 @@ export default defineComponent({
         }
       })
 
-      addressModal.present()
+      addressModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async addCustomSchedule() {
       const customScheduleModal = await modalController.create({
@@ -1160,14 +1162,18 @@ export default defineComponent({
         componentProps: { mappingId: mapping.facilityIdenTypeId, mapping, type: 'update' }
       })
 
-      customMappingModal.present()
+      customMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async editFacilityExternalId() {
       const facilityExternalIdModal = await modalController.create({
         component: FacilityExternalIdModal
       })
 
-      facilityExternalIdModal.present()
+      facilityExternalIdModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async editShopifyFacilityMapping(shopifyFacilityMapping: any) {
       const customMappingModal = await modalController.create({
@@ -1175,7 +1181,9 @@ export default defineComponent({
         componentProps: { shopifyFacilityMapping, type: 'update' }
       })
 
-      customMappingModal.present()
+      customMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     getOpenEndTime(startTime: any, capacity: any) {
       const openTime = DateTime.fromFormat(startTime, 'HH:mm:ss').toFormat('HH:mm a');