From e32b01edc96fd2a43fd5a3c3729529499066b53a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 24 Feb 2018 15:19:16 -0500
Subject: [PATCH] input event, not change

---
 .../vault/password-generator.component.html   |  6 ++---
 src/app/vault/password-generator.component.ts | 22 +++++++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 2bb6c4ebe4..6fc1b3e6f3 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -27,7 +27,7 @@
                         <div class="box-content-row box-content-row-slider" appBoxRow>
                             <label for="length">{{'length' | i18n}}</label>
                             <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
-                                   (change)="saveOptions()">
+                                   (input)="saveOptions()">
                             <input id="lengthRange" type="range" min="5" max="128" step="1"
                                    [(ngModel)]="options.length">
                         </div>
@@ -57,12 +57,12 @@
                     <div class="box-content condensed">
                         <div class="box-content-row box-content-row-input" appBoxRow>
                             <label for="min-number">{{'minNumbers' | i18n}}</label>
-                            <input id="min-number" type="number" min="0" max="9" (change)="saveOptions()"
+                            <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
                                    [(ngModel)]="options.minNumber">
                         </div>
                         <div class="box-content-row box-content-row-input" appBoxRow>
                             <label for="min-special">{{'minSpecial' | i18n}}</label>
-                            <input id="min-special" type="number" min="0" max="9" (change)="saveOptions()"
+                            <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
                                    [(ngModel)]="options.minSpecial">
                         </div>
                         <div class="box-content-row box-content-row-checkbox" appBoxRow>
diff --git a/src/app/vault/password-generator.component.ts b/src/app/vault/password-generator.component.ts
index 265bc00646..36fa12353e 100644
--- a/src/app/vault/password-generator.component.ts
+++ b/src/app/vault/password-generator.component.ts
@@ -4,8 +4,10 @@ import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import {
+    ChangeDetectorRef,
     Component,
     EventEmitter,
+    NgZone,
     Input,
     OnInit,
     Output,
@@ -30,7 +32,8 @@ export class PasswordGeneratorComponent implements OnInit {
 
     constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private ngZone: NgZone,
+        private changeDetectorRef: ChangeDetectorRef) { }
 
     async ngOnInit() {
         this.options = await this.passwordGenerationService.getOptions();
@@ -44,15 +47,19 @@ export class PasswordGeneratorComponent implements OnInit {
             // Save password once the slider stop moving.
             slider.addEventListener('change', async (e) => {
                 e.preventDefault();
-                this.saveOptions(false);
+                this.functionWithChangeDetection(() => {
+                    this.saveOptions(false);
+                });
                 await this.passwordGenerationService.addHistory(this.password);
                 this.analytics.eventTrack.next({ action: 'Regenerated Password' });
             });
             // Regenerate while slider moving
             slider.addEventListener('input', (e) => {
                 e.preventDefault();
-                this.normalizeOptions();
-                this.password = this.passwordGenerationService.generatePassword(this.options);
+                this.functionWithChangeDetection(() => {
+                    this.normalizeOptions();
+                    this.password = this.passwordGenerationService.generatePassword(this.options);
+                });
             });
         }
     }
@@ -126,4 +133,11 @@ export class PasswordGeneratorComponent implements OnInit {
             this.options.minSpecial = this.options.length - this.options.minNumber;
         }
     }
+
+    private functionWithChangeDetection(func: Function) {
+        this.ngZone.run(async () => {
+            func();
+            this.changeDetectorRef.detectChanges();
+        });
+    }
 }