fix: issue when creating new note in new tag doesnt re-render immedia…

…tely
standardnotes · Jan 12, 2022 · a2b2d3f · a2b2d3f
1 parent 8f4f188
commit a2b2d3f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
@@ -333,9 +333,14 @@ export class NotesViewState {
     if (this.isFiltering) {
       title = this.noteFilterText;
     }
+
     await this.appState.openNewNote(title);
-    this.reloadNotes();
-    this.appState.noteTags.reloadTags();
+    this.application.performFunctionWithAngularDigestCycleAfterAsyncChange(
+      () => {
+        this.reloadNotes();
+        this.appState.noteTags.reloadTags();
+      }
+    );
   };
 
   createPlaceholderNote = () => {

diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
@@ -43,6 +43,7 @@ export class WebApplication extends SNApplication {
     platform: Platform,
     identifier: string,
     private $compile: angular.ICompileService,
+    private $timeout: angular.ITimeoutService,
     scope: angular.IScope,
     defaultSyncServerHost: string,
     public bridge: Bridge,
@@ -104,6 +105,16 @@ export class WebApplication extends SNApplication {
     this.webServices = services;
   }
 
+  /**
+   * If a UI change is made in an async function, Angular might not re-render the change.
+   * Use this function to force re-render the UI after an async function has made UI changes.
+   */
+  public performFunctionWithAngularDigestCycleAfterAsyncChange(
+    func: () => void
+  ) {
+    this.$timeout(func);
+  }
+
   public getAppState(): AppState {
     return this.webServices.appState;
   }

diff --git a/app/assets/javascripts/ui_models/application_group.ts b/app/assets/javascripts/ui_models/application_group.ts
@@ -61,6 +61,7 @@ export class ApplicationGroup extends SNApplicationGroup {
       platform,
       descriptor.identifier,
       this.$compile,
+      this.$timeout,
       scope,
       this.defaultSyncServerHost,
       this.bridge,