fix(rum-explorer): changes input event to keydown-enter for the filter input field

tools/oversight/elements/facetsidebar.js

@@ -38,7 +38,7 @@ export default class FacetSidebar extends HTMLElement {
     const filterInput = document.createElement('input');
     filterInput.type = 'text';
     filterInput.id = 'filter';
-    filterInput.placeholder = 'Type to filter...';
+    filterInput.placeholder = 'Type to filter, press ↵ to apply';
     quickFilter.append(filterInput);
     this.append(quickFilter);
 

tools/oversight/slicer.js

@@ -242,7 +242,7 @@
       ));
 
       if (cp === 'loadresource') {
         console.log('adding histogram facet');
         // loadresource.target are not discrete values, but the number
         // of milliseconds it took to load the resource, so the best way
         // to present this is to create a histogram
@@ -431,7 +431,14 @@
       loadData(elems.viewSelect.value).then(draw);
     }
 
-    elems.filterInput.addEventListener('input', () => {
+    elems.filterInput.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        updateState();
+        draw();
+      }
+    });
+
+    elems.filterInput.addEventListener('blur', () => {
       updateState();
       draw();
     });

tools/rum/elements/facetsidebar.js

@@ -30,7 +30,7 @@ export default class FacetSidebar extends HTMLElement {
     const filterInput = document.createElement('input');
     filterInput.type = 'text';
     filterInput.id = 'filter';
-    filterInput.placeholder = 'Type to filter...';
+    filterInput.placeholder = 'Type to filter, press ↵ to apply';
     quickFilter.append(filterInput);
     this.append(quickFilter);
     const facetsElement = document.createElement('aside');

tools/rum/slicer.js

@@ -381,7 +381,14 @@ const io = new IntersectionObserver((entries) => {
       loadData(elems.viewSelect.value).then(draw);
     }
 
-    elems.filterInput.addEventListener('input', () => {
+    elems.filterInput.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        updateState();
+        draw();
+      }
+    });
+
+    elems.filterInput.addEventListener('blur', () => {
       updateState();
       draw();
     });