diff --git a/tools/oversight/elements/facetsidebar.js b/tools/oversight/elements/facetsidebar.js index 92c3edc4..23d5fb94 100644 --- a/tools/oversight/elements/facetsidebar.js +++ b/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); diff --git a/tools/oversight/slicer.js b/tools/oversight/slicer.js index 9e6a4aac..2ffc42f4 100644 --- a/tools/oversight/slicer.js +++ b/tools/oversight/slicer.js @@ -431,7 +431,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(); }); diff --git a/tools/rum/elements/facetsidebar.js b/tools/rum/elements/facetsidebar.js index 329ba677..5bd075e7 100644 --- a/tools/rum/elements/facetsidebar.js +++ b/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'); diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js index 30f024c9..8f1cb69f 100644 --- a/tools/rum/slicer.js +++ b/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(); });