Merge pull request #299 from ymaheshwari1/#132

Implemented: support to add focus on first input element inside mapping modals(#132)
hotwax · Aug 22, 2024 · 8a8b731 · 8a8b731
2 parents d677897 + fb3b58f
commit 8a8b731
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {

diff --git 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
@@ -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');