MappingBrowser go to page: Select and focus input when shown (#387)

gbv · Sep 27, 2022 · fe909b8 · fe909b8
1 parent e206a3a
commit fe909b8
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/components/MappingBrowserTable.vue b/src/components/MappingBrowserTable.vue
@@ -384,6 +384,7 @@
       :target="`mappingBrowser-pagination-goToPage-${section.id}`"
       triggers="click"
       placement="bottomleft"
+      @shown="goToPagePopoverShown"
       @hide="popoverHide($event, `goToPage-${section.id}`)">
       <div>
         <p>
@@ -764,6 +765,13 @@ export default {
       this.$emit("pageChange", { registry: section.registry, page: this.goToPageValues[section.id], userInitiated: true })
       this.$set(this.popoverShown, `goToPage-${section.id}`, false)
     },
+    goToPagePopoverShown(event) {
+      const inputField = event.relatedTarget && event.relatedTarget.getElementsByTagName("input")[0]
+      if (inputField) {
+        inputField.focus()
+        inputField.select()
+      }
+    },
   },
 }
 </script>