luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replaced JS logic with CSS focus-within logic

Browse source
This commit is contained in:
Dan Brown 2022-11-20 21:53:53 +00:00
parent 851ab47f8a
commit 2c1f20969a
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
2 changed files with 1 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/js/components/global-search.js
View file

@ -15,8 +15,6 @@ class GlobalSearch {
}
setupListeners() {
this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
this.input.addEventListener('input', () => {
const value = this.input.value;
if (value.length > 0) {
@ -45,8 +43,6 @@ class GlobalSearch {
showSuggestions() {
this.container.classList.add('search-active');
document.addEventListener('click', this.hideOnOuterEventListener);
document.addEventListener('focusin', this.hideOnOuterEventListener);
window.requestAnimationFrame(() => {
this.suggestions.classList.add('search-suggestions-animation');
})
@ -56,15 +52,7 @@ class GlobalSearch {
this.container.classList.remove('search-active');
this.suggestions.classList.remove('search-suggestions-animation');
this.suggestionResultsWrap.innerHTML = '';
document.removeEventListener('click', this.hideOnOuterEventListener);
document.removeEventListener('focusin', this.hideOnOuterEventListener);
}
hideOnOuterEventListener(event) {
if (!this.container.contains(event.target)) {
this.hideSuggestions();
}
};
}
export default GlobalSearch;

2
resources/sass/_header.scss
View file

@ -164,7 +164,7 @@ header .search-box {
overflow: hidden;
}
}
.search-active .global-search-suggestions {
.search-active:focus-within .global-search-suggestions {
display: block;
}
header .search-box.search-active input {