Sage Search followup (#539)

* Sage Search followup

* removed click functionality

lib/sage-frontend/javascript/system/search.js

@@ -14,17 +14,15 @@ Sage.search = (function() {
   // ==================================================
 
   function init(el) {
-    const elButton = el.querySelector(SELECTOR_SEARCH_BUTTON);
+    const elInput = el.querySelector(SELECTOR_SEARCH_INPUT);
 
-    el.addEventListener('keydown', searchOnInputHandler);
-    elButton.addEventListener('click', searchClearClickHandler);
+    // check the input for a value on load
+    hasValue(elInput) ? addVisibleButtonState(el) : removeVisibleButtonState(el);
+    el.addEventListener('keyup', searchOnInputHandler);
   }
 
   function unbind(el) {
-    const elButton = el.querySelector(SELECTOR_SEARCH_BUTTON);
-
-    el.removeEventListener('keydown', searchOnInputHandler);
-    elButton.removeEventListener('click', searchClearClickHandler);
+    el.removeEventListener('keyup', searchOnInputHandler);
   }
 
   function searchOnInputHandler(evt) {
@@ -34,18 +32,9 @@ Sage.search = (function() {
     hasValue(elInput) ? addVisibleButtonState(elParent) : removeVisibleButtonState(elParent);
   }
 
-  function searchClearClickHandler(evt) {
-    const elParent = evt.currentTarget.closest(`[${SELECTOR_SEARCH}]`);
-    const elInput = elParent.querySelector(SELECTOR_SEARCH_INPUT);
-
-    elParent.classList.remove(CLASS_VISIBLE);
-    elInput.value = ""; /* reset the search field */
-    elInput.blur(); /* force refresh with blur event */
-  }
-
   // check if the search value has text or not
   function hasValue(el) {
-    return el.value.length >= 0
+    return el.value.length > 0
   }
 
   function addVisibleButtonState(elParent) {

lib/sage_rails/app/views/sage_components/_sage_search.html.erb

@@ -1,4 +1,4 @@
-<form 
+<div
   role="search"
   class=" sage-search
   <%= "sage-search--contained" if component.contained %>
@@ -27,4 +27,4 @@
     }
   } %>
 
-</form>
+</div>