Implemented: support to add focus on first input element inside mapping modals(#132)

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" />

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">

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>
 

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>
 

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,23 +66,29 @@ export default defineComponent({
       })
 
       await popoverController.dismiss()
-      addMappingModal.present()
+      addMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async createShopifyFacilityMappingModal() {
       const facilityShopifyMappingModal = await modalController.create({
         component: FacilityShopifyMappingModal
       })
 
       await popoverController.dismiss()
-      facilityShopifyMappingModal.present()
+      facilityShopifyMappingModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
     async createFacilityExternalId() {
       const facilityExternalIdModal = await modalController.create({
         component: FacilityExternalIdModal
       })
 
       await popoverController.dismiss()
-      facilityExternalIdModal.present()
+      facilityExternalIdModal.present().then(() => {
+        (document.querySelector("#inputElement") as any).setFocus()
+      })
     },
   },
   setup() {

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>
 

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,22 +1162,28 @@ 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({
         component: FacilityShopifyMappingModal,
         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');