fix: only trigger search options animation once

standardnotes · Mar 11, 2021 · 14d2109 · 14d2109
1 parent c6c8d84
commit 14d2109
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git 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
@@ -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 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,
+    });
+  }
+
   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(10);
-    await this.appState.mouseUp;
-    this.setState({
-      searchIsFocused: this.searchBar?.[0] === document.activeElement,
+    await this.$timeout(50);
+    await this.setState({
+      searchIsFocused:
+        this.searchBarInput?.[0] === document.activeElement,
     });
     this.onFilterEnter();
   }
 
-  onSearchInputFocus() {
-    this.setState({
-      searchIsFocused: true
-    });
-  }
-
   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,
     });
   }