fix: only trigger search options animation once

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"

app/assets/javascripts/views/notes/notes_view.ts

@@ -76,7 +76,8 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesState> {
   private searchKeyObserver: any
   private noteFlags: Partial<Record<UuidString, NoteFlag[]>> = {}
   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<unknown, NotesState> {
     }
   }
 
-  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<unknown, NotesState> {
     await this.reloadNotes();
   }
 
-  async onSearchInputBlur() {
+  async onIncludeProtectedNoteTextChange(event: Event) {
-    /**
+    this.searchBarInput?.[0].focus();
-     * Wait a non-zero amount of time so the newly-focused element can have
+    if (this.state.noteFilter.includeProtectedNoteText) {
-     * enough time to set its state
+      this.state.noteFilter.includeProtectedNoteText = false;
-     */
+    } else {
-    await this.$timeout(10);
+      this.setState({
-    await this.appState.mouseUp;
+        authorizingSearchOptions: true,
-    this.setState({
+      });
-      searchIsFocused: this.searchBar?.[0] === document.activeElement,
+      event.preventDefault();
-    });
+      if (await this.application.authorizeSearchingProtectedNotesText()) {
-    this.onFilterEnter();
+        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,
     });
   }