Don't trigger a search unless we have three characters (#1018)

Author: bryanmikaelian

js/index.js

@@ -16,6 +16,7 @@ import navigation from './navigation'
 import relativeLinks from './relative-links'
 import sideMenu from './side-menu'
 import tracking from './tracking'
+import searchBar from './search-bar'
 feedback()
 accordion()
 accordionGroup()
@@ -33,4 +34,5 @@ backScrolling()
 navigation()
 relativeLinks()
 sideMenu()
-tracking()
+tracking()
+searchBar()

js/search-bar/index.js

@@ -0,0 +1,16 @@
+const ELEMENT_NAME = '.DocsNav-search-input'
+
+export default function() {
+  const el = document.querySelectorAll(ELEMENT_NAME)[0]
+  if (el) {
+    el.addEventListener('input', function(e) {
+      // SwiftType currently trigger based on an `input` event being fired.
+      // However, we only want this to occur if there are more than 2 characters typed
+      // NOTE: If the user types 0 charactes i.e. removes and cancels a search we will still trigger SwiftType so we can hide the search UX.
+
+      if (e.target.value.length > 0 && e.target.value.length < 3) {
+        e.stopImmediatePropagation()
+      }
+    })
+  }
+}

js/side-menu/index.js

@@ -1,17 +1,22 @@
-export default function () {
-
+export default function() {
   // highlight active link slug in side menu
   const pathname = document.location.pathname
   // find all links associated with active catalog page
-  const links = document.querySelectorAll(`[data-class-active="menu-item--active"] > ul > li > a[href="${pathname}"]`)
+  const links = document.querySelectorAll(
+    `[data-class-active="menu-item--active"] > ul > li > a[href="${pathname}"]`
+  )
   // only open the first 'category' that contains the active integrations
-  links[0].parentElement.parentElement.parentElement.className += ' menu-item--active'
-  for (let i = 0; i < links.length; i++) {
-    let link = links[i]
-    if (link.classList.contains('menu-item__link')) {
-      // set link to be active
-      link.parentElement.className += ' menu-item--active menu-item--indicator'
-      link.className += ' menu-item__link--indicator'
+  if (!!links.length) {
+    links[0].parentElement.parentElement.parentElement.className +=
+      ' menu-item--active'
+    for (let i = 0; i < links.length; i++) {
+      let link = links[i]
+      if (link.classList.contains('menu-item__link')) {
+        // set link to be active
+        link.parentElement.className +=
+          ' menu-item--active menu-item--indicator'
+        link.className += ' menu-item__link--indicator'
+      }
     }
   }
-}
+}