Merge pull request #201 from ymaheshwari1/fix/auto-focus-inventory-re…

…name Implemented: support to autofocus on the input when updating rule name
hotwax · Apr 22, 2024 · 6eb1dc0 · 6eb1dc0
2 parents 987aa95 + 86a11b2
commit 6eb1dc0
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -125,7 +125,7 @@
                   <h1 v-show="!isRuleNameUpdating">{{ selectedRoutingRule.ruleName }}</h1>
                 </ion-label>
                 <!-- Added class as we can't change the background of ion-input with css property, and we need to change the background to show the user that now this value is editable -->
-                <ion-input :class="isRuleNameUpdating ? 'name' : ''" v-show="isRuleNameUpdating" aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
+                <ion-input ref="ruleNameRef" :class="isRuleNameUpdating ? 'name' : ''" v-show="isRuleNameUpdating" aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
               </ion-item>
               <div>
                 <ion-item>
@@ -138,7 +138,7 @@
                 </ion-item>
                 <ion-item>
                   <div slot="end">
-                    <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">
+                    <ion-button size="small" @click="isRuleNameUpdating ? updateRuleName(selectedRoutingRule.routingRuleId) : editRuleName()" fill="outline">
                       <ion-icon slot="start" :icon="isRuleNameUpdating ? saveOutline : pencilOutline" />
                       {{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}
                     </ion-button>
@@ -351,6 +351,7 @@ let isRouteNameUpdating = ref(false)
 const routeNameRef = ref()
 const operatorRef = ref()
 const measurementRef = ref()
+const ruleNameRef = ref()
 
 onIonViewWillEnter(async () => {
   emitter.emit("presentLoader", { message: "Fetching filters and inventory rules", backdropDismiss: false })
@@ -902,13 +903,21 @@ function updateRuleStatus(event: CustomEvent, routingRuleId: string) {
   hasUnsavedChanges.value = true
 }
 
+async function editRuleName() {
+  isRuleNameUpdating.value = !isRuleNameUpdating.value;
+  // Waiting for DOM updations before focus inside the text-area, as it is conditionally rendered in the DOM
+  await nextTick()
+  ruleNameRef.value.$el.setFocus();
+}
+
 function updateRuleName(routingRuleId: string) {
   // Checking the updated name with the original object, as we have reference to inventoryRules that will also gets updated on updating selectedRoutingRule
   currentRouting.value["rules"].map((inventoryRule: any) => {
     if(inventoryRule.routingRuleId === routingRuleId && inventoryRule.ruleName.trim() !== selectedRoutingRule.value.ruleName.trim()) {
       hasUnsavedChanges.value = true
     }
   })
+  isRuleNameUpdating.value = false;
 }
 
 async function cloneRule() {