Merge pull request #191 from Honny1/add-clear-button-to-search-bar

Implement clear button for search bar

openscap_report/report_generators/html_templates/js/interactive_script.js

@@ -128,4 +128,9 @@ const selector = ".pf-c-clipboard-copy__text";
 document.querySelectorAll("#copy").forEach(el => el.addEventListener('click', () => {
     const el_with_text = el.parentElement.parentElement.parentElement.querySelector(selector);
     navigator.clipboard.writeText(el_with_text.textContent);
-}));
+}));
+
+function clear_input(self) { // eslint-disable-line no-unused-vars
+    self.previousSibling.value= "";
+    search_rule(self.previousSibling);
+}

openscap_report/report_generators/html_templates/search_input.html

@@ -4,6 +4,9 @@
     <div class="pf-c-input-group">
         <input class="pf-c-form-control pf-m-search" oninput="search_rule(this)" type="search"
             placeholder="Search rule" id="input-search-rule" />
+        <button class="pf-c-button pf-m-control" type="button" aria-label="Clear" onclick="clear_input(this)">
+            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+        </button>
         <button class="pf-c-button pf-m-control" type="button" aria-expanded="true" aria-label="Advanced options"
             onclick="show_advanced_options(this);">
             <i class="fas fa-caret-right" aria-hidden="true"></i>