@pepperi-addons/ngx-lib 0.4.2-beta.317 → 0.4.2-beta.319

package/fesm2020/pepperi-addons-ngx-lib.mjs

@@ -899,24 +899,43 @@ class PepInputAutoWidthDirective {
         this.el = el;
         this.includePadding = true;
         this.input = null;
+        this.lastValue = null;
+        this.onBlurHandler = () => this.setWidthUsingText();
+        this.onKeyupHandler = () => this.setWidthUsingText();
     }
     ngAfterViewInit() {
-        if (this.el.nativeElement.tagName.toLowerCase() === 'input') {
-            this.input = this.el;
+        if (this.el.nativeElement?.tagName?.toLowerCase() === 'input') {
+            this.input = this.el.nativeElement;
         }
         else {
-            const list = this.el.nativeElement.querySelectorAll('input');
-            this.input = list.length > 0 ? list[0] : null;
+            const list = this.el.nativeElement?.querySelectorAll
+                ? this.el.nativeElement.querySelectorAll('input')
+                : null;
+            this.input = list && list.length > 0 ? list[0] : null;
         }
         if (this.input) {
-            this.input.addEventListener('blur', this.setWidthUsingText.bind(this));
-            this.input.addEventListener('keyup', this.setWidthUsingText.bind(this));
+            this.input.addEventListener('blur', this.onBlurHandler);
+            this.input.addEventListener('keyup', this.onKeyupHandler);
         }
         this.setWidthUsingText();
     }
+    ngDoCheck() {
+        if (!this.input) {
+            return;
+        }
+        // Keep the width in sync when value is updated programmatically (Angular bindings),
+        // not only on user key events.
+        if (this.input.value !== this.lastValue) {
+            this.setWidthUsingText();
+        }
+    }
     ngOnDestroy() {
-        this.input.removeEventListener('blur', this.setWidthUsingText.bind(this));
-        this.input.removeEventListener('keyup', this.setWidthUsingText.bind(this));
+        if (!this.input) {
+            return;
+        }
+        this.input.removeEventListener('blur', this.onBlurHandler);
+        this.input.removeEventListener('keyup', this.onKeyupHandler);
+        this.input = null;
     }
     get paddingWidth() {
         return this.includePadding
@@ -933,6 +952,7 @@ class PepInputAutoWidthDirective {
         if (this.input) {
             const text = this.input.value;
             this.setWidth(this.textWidth(text) + this.paddingWidth);
+            this.lastValue = text;
         }
     }
     _sumPropertyValues(properties) {