Add `autofocus` directive for input elementskp-add-vue-input-autofocus-directive

1 files changed, 39 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/directives/autofocusonshow.js b/app/assets/javascripts/vue_shared/directives/autofocusonshow.js
new file mode 100644
index 00000000000..4659ec20ceb
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/directives/autofocusonshow.js
@@ -0,0 +1,39 @@
+/**
+ * Input/Textarea Autofocus Directive for Vue
+ */
+export default {
+  /**
+   * Set focus when element is rendered, but
+   * is not visible, using IntersectionObserver
+   *
+   * @param {Element} el Target element
+   */
+  inserted(el) {
+    if ('IntersectionObserver' in window) {
+      // Element visibility is dynamic, so we attach observer
+      el.visibilityObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          // Combining `intersectionRatio > 0` and
+          // element's `offsetParent` presence will
+          // deteremine if element is truely visible
+          if (entry.intersectionRatio > 0 && entry.target.offsetParent) {
+            entry.target.focus();
+          }
+        });
+      });
+
+      // Bind the observer.
+      el.visibilityObserver.observe(el, { root: document.documentElement });
+    }
+  },
+  /**
+   * Detach observer on unbind hook.
+   *
+   * @param {Element} el Target element
+   */
+  unbind(el) {
+    if (el.visibilityObserver) {
+      el.visibilityObserver.disconnect();
+    }
+  },
+};