diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug index ea3d8feec..2439b9c8e 100644 --- a/app/assets/javascripts/views/notes/notes-view.pug +++ b/app/assets/javascripts/views/notes/notes-view.pug @@ -12,7 +12,7 @@ i.icon.ion-plus.add-button .filter-section(role='search') input#search-bar.filter-bar( - ng-ref='self.searchBar' + ng-ref='self.searchBarInput' ng-focus='self.onSearchInputFocus()' ng-blur='self.onSearchInputBlur()', ng-change='self.filterTextChanged()', @@ -32,6 +32,7 @@ ) .sk-horizontal-group.tight input( + ng-ref='self.searchOptionsInput' ng-focus="self.onSearchOptionsFocus()" ng-blur="self.onSearchOptionsBlur()" type="checkbox" diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts index 1f3f88289..c43c949ee 100644 --- a/app/assets/javascripts/views/notes/notes_view.ts +++ b/app/assets/javascripts/views/notes/notes_view.ts @@ -76,7 +76,8 @@ class NotesViewCtrl extends PureViewCtrl { private searchKeyObserver: any private noteFlags: Partial> = {} private removeObservers: Array<() => void> = []; - private searchBar?: JQLite; + private searchBarInput?: JQLite; + private searchOptionsInput?: JQLite; /* @ngInject */ constructor($timeout: ng.ITimeoutService,) { @@ -162,25 +163,6 @@ class NotesViewCtrl extends PureViewCtrl { } } - async onIncludeProtectedNoteTextChange(event: Event) { - this.searchBar?.[0].focus(); - if (this.state.noteFilter.includeProtectedNoteText) { - this.state.noteFilter.includeProtectedNoteText = false; - } else { - event.preventDefault(); - this.setState({ - authorizingSearchOptions: true, - }); - if (await this.application.authorizeSearchingProtectedNotesText()) { - this.state.noteFilter.includeProtectedNoteText = true; - } - this.setState({ - authorizingSearchOptions: false, - }); - } - this.flushUI(); - } - /** @template */ public get activeEditorNote() { return this.appState?.getActiveEditor()?.note; @@ -721,35 +703,57 @@ class NotesViewCtrl extends PureViewCtrl { await this.reloadNotes(); } - async onSearchInputBlur() { - /** - * Wait a non-zero amount of time so the newly-focused element can have - * enough time to set its state - */ - await this.$timeout(10); - await this.appState.mouseUp; - this.setState({ - searchIsFocused: this.searchBar?.[0] === document.activeElement, - }); - this.onFilterEnter(); + async onIncludeProtectedNoteTextChange(event: Event) { + this.searchBarInput?.[0].focus(); + if (this.state.noteFilter.includeProtectedNoteText) { + this.state.noteFilter.includeProtectedNoteText = false; + } else { + this.setState({ + authorizingSearchOptions: true, + }); + event.preventDefault(); + if (await this.application.authorizeSearchingProtectedNotesText()) { + this.state.noteFilter.includeProtectedNoteText = true; + } + await this.$timeout(50); + await this.setState({ + authorizingSearchOptions: false, + }); + } } onSearchInputFocus() { this.setState({ - searchIsFocused: true + searchIsFocused: true, }); } + async onSearchInputBlur() { + await this.appState.mouseUp; + /** + * Wait a non-zero amount of time so the newly-focused element can have + * enough time to set its state + */ + await this.$timeout(50); + await this.setState({ + searchIsFocused: + this.searchBarInput?.[0] === document.activeElement, + }); + this.onFilterEnter(); + } + onSearchOptionsFocus() { this.setState({ - searchOptionsAreFocused: true + searchOptionsAreFocused: true, }); } async onSearchOptionsBlur() { - await this.$timeout(100); + await this.appState.mouseUp; + await this.$timeout(50); this.setState({ - searchOptionsAreFocused: false + searchOptionsAreFocused: + this.searchOptionsInput?.[0] === document.activeElement, }); }