fix(base-input): inputUpdated() is triggered when initialized

Author: manucorporat

src/components/datetime/datetime.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -273,7 +273,7 @@ export const DATETIME_VALUE_ACCESSOR: any = {
   providers: [DATETIME_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,
 })
-export class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
+export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {
 
   _text: string = '';
   _min: DateTimeData;
@@ -431,16 +431,15 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
   /**
    * @hidden
    */
-  ngAfterContentInit() {
+  ngAfterViewInit() {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
     // if neither were provided then it will use default English names
     ['monthNames', 'monthShortNames', 'dayNames', 'dayShortNames'].forEach(type => {
       (<any>this)._locale[type] = convertToArrayOfStrings(isPresent((<any>this)[type]) ? (<any>this)[type] : this._config.get(type), type);
     });
 
-    // update how the datetime value is displayed as formatted text
-    this.updateText();
+    this._initialize();
   }
 
   /**

src/components/datetime/test/datetime.spec.ts

@@ -144,23 +144,23 @@ describe('DateTime', () => {
   describe('writeValue', () => {
 
     it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('Dec 15, 1994');
     }));
 
     it('should updateText with pickerFormat when no displayFormat', zoned(() => {
       datetime.pickerFormat = 'YYYY';
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('1994');
     }));
 
     it('should updateText with displayFormat when no pickerFormat', zoned(() => {
       datetime.displayFormat = 'YYYY';
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('1994');
@@ -172,7 +172,7 @@ describe('DateTime', () => {
 
     it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
       datetime.generate();
@@ -186,7 +186,7 @@ describe('DateTime', () => {
 
     it('should generate with only displayFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.displayFormat = 'YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -199,7 +199,7 @@ describe('DateTime', () => {
 
     it('should generate with only pickerFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.pickerFormat = 'YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -212,7 +212,7 @@ describe('DateTime', () => {
 
     it('should generate with custom locale short month names from input property', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.pickerFormat = 'MMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -227,7 +227,7 @@ describe('DateTime', () => {
 
     it('should generate with custom locale full month names from input property', zoned(() => {
       datetime.monthNames = customLocale.monthNames;
-      datetime.ngAfterContentInit();
+      datetime.ngAfterViewInit();
       datetime.pickerFormat = 'MMMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 

src/components/select/select.ts

@@ -211,11 +211,6 @@ export class Select extends BaseInput<string[]> implements AfterViewInit, OnDest
     super(config, elementRef, renderer, 'select', [], form, item, null);
   }
 
-
-  ngAfterContentInit() {
-    this._inputUpdated();
-  }
-
   @HostListener('click', ['$event'])
   _click(ev: UIEvent) {
     if (ev.detail === 0) {
@@ -405,14 +400,14 @@ export class Select extends BaseInput<string[]> implements AfterViewInit, OnDest
   set options(val: QueryList<Option>) {
     this._options = val;
 
-    if (this._value.length  === 0) {
+    if (this._value.length === 0) {
       // there are no values set at this point
       // so check to see who should be selected
       // we use writeValue() because we don't want to update ngModel
       this.writeValue(val.filter(o => o.selected).map(o => o.value));
+    } else {
+      this._inputUpdated();
     }
-
-    this._inputUpdated();
   }
 
   _inputNormalize(val: any): string[] {

src/util/base-input.ts

@@ -147,7 +147,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
     console.debug('BaseInput: value changed:', normalized, this);
     this._value = normalized;
     this._inputCheckHasValue(normalized);
-    this._inputUpdated();
+    if (this._init) {
+      this._inputUpdated();
+    }
     return true;
   }
 
@@ -186,6 +188,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
       return;
     }
     this._init = true;
+    if (isPresent(this._value)) {
+      this._inputUpdated();
+    }
   }
 
   /**
@@ -195,6 +200,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
     if (this._isFocus) {
       return;
     }
+    assert(this._init, 'component was not initialized');
     assert(NgZone.isInAngularZone(), '_fireFocus: should be zoned');
 
     this._isFocus = true;
@@ -209,6 +215,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
     if (!this._isFocus) {
       return;
     }
+    assert(this._init, 'component was not initialized');
     assert(NgZone.isInAngularZone(), '_fireBlur: should be zoned');
 
     this._isFocus = false;
@@ -283,5 +290,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
   /**
    * @hidden
    */
-  _inputUpdated() {}
+  _inputUpdated() {
+    assert(this._init, 'component should be initialized');
+  }
 }

src/util/input-tester.ts

@@ -74,31 +74,33 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
   assertEqual(input.isFocus(), false, 'should not be focus');
   assertEqual(input.value, config.defaultValue, 'default value is wrong');
 
-  let blurCount = 0;
-  let focusCount = 0;
-  const subBlur = input.ionBlur.subscribe((ev: any) => {
-    assertEqual(ev, input, 'ionBlur argument is wrong');
-    blurCount++;
-  });
-  const subFocus = input.ionFocus.subscribe((ev: any) => {
-    assertEqual(ev, input, 'ionFocus argument is wrong');
-    focusCount++;
-  });
-  input._fireFocus();
-  assertEqual(input._isFocus, true, 'should be focus');
-  assertEqual(input.isFocus(), true, 'should be focus');
-  input._fireFocus();
-
-  input._fireBlur();
-  assertEqual(input._isFocus, false, 'should be not focus');
-  assertEqual(input.isFocus(), false, 'should be not focus');
-  input._fireBlur(); // it should not crash
-
-  assertEqual(focusCount, 1, 'ionFocus was not called correctly');
-  assertEqual(blurCount, 1, 'ionBlur was not called correctly');
-
-  subBlur.unsubscribe();
-  subFocus.unsubscribe();
+  if (isInit) {
+    let blurCount = 0;
+    let focusCount = 0;
+    const subBlur = input.ionBlur.subscribe((ev: any) => {
+      assertEqual(ev, input, 'ionBlur argument is wrong');
+      blurCount++;
+    });
+    const subFocus = input.ionFocus.subscribe((ev: any) => {
+      assertEqual(ev, input, 'ionFocus argument is wrong');
+      focusCount++;
+    });
+    input._fireFocus();
+    assertEqual(input._isFocus, true, 'should be focus');
+    assertEqual(input.isFocus(), true, 'should be focus');
+    input._fireFocus();
+
+    input._fireBlur();
+    assertEqual(input._isFocus, false, 'should be not focus');
+    assertEqual(input.isFocus(), false, 'should be not focus');
+    input._fireBlur(); // it should not crash
+
+    assertEqual(focusCount, 1, 'ionFocus was not called correctly');
+    assertEqual(blurCount, 1, 'ionBlur was not called correctly');
+
+    subBlur.unsubscribe();
+    subFocus.unsubscribe();
+  }
 }
 
 function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean) {
@@ -150,7 +152,6 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
 
     OnTouchedCalled = OnChangeCalled = ionChangeCalled = 0;
 
-    console.log(test[0], input.value);
     // Set same value (it should not redispatch)
     input.value = test[0];
     assertEqual(ionChangeCalled, 0, 'loop: ionChange should not be called');