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

2 files changed, 77 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();
+    }
+  },
+};
diff --git a/spec/javascripts/vue_shared/directives/autofocusonshow_spec.js b/spec/javascripts/vue_shared/directives/autofocusonshow_spec.js
new file mode 100644
index 00000000000..f1ca5f61496
--- /dev/null
+++ b/spec/javascripts/vue_shared/directives/autofocusonshow_spec.js
@@ -0,0 +1,38 @@
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+
+/**
+ * We're testing this directive's hooks as pure functions
+ * since behaviour of this directive is highly-dependent
+ * on underlying DOM methods.
+ */
+describe('AutofocusOnShow directive', () => {
+  describe('with input invisible on component render', () => {
+    let el;
+
+    beforeAll(() => {
+      setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>');
+      el = document.querySelector('#inputel');
+    });
+
+    it('should bind IntersectionObserver on input element', () => {
+      spyOn(el, 'focus');
+
+      autofocusonshow.inserted(el);
+
+      expect(el.visibilityObserver).toBeDefined();
+      expect(el.focus).not.toHaveBeenCalled();
+    });
+
+    it('should stop IntersectionObserver on input element on unbind hook', () => {
+      el.visibilityObserver = {
+        disconnect: () => {},
+      };
+      spyOn(el.visibilityObserver, 'disconnect');
+
+      autofocusonshow.unbind(el);
+
+      expect(el.visibilityObserver).toBeDefined();
+      expect(el.visibilityObserver.disconnect).toHaveBeenCalled();
+    });
+  });
+});