Skip to content

Commit 239b559

Browse files
committed
fix(base-input): initialize on ngAfterContentInit
1 parent 6677d80 commit 239b559

File tree

11 files changed

+44
-51
lines changed

11 files changed

+44
-51
lines changed

src/components/checkbox/checkbox.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
1+
import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
22
import { NG_VALUE_ACCESSOR } from '@angular/forms';
33

44
import { Config } from '../../config/config';
@@ -66,7 +66,7 @@ import { Item } from '../item/item';
6666
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true } ],
6767
encapsulation: ViewEncapsulation.None,
6868
})
69-
export class Checkbox extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy {
69+
export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDestroy {
7070

7171
/**
7272
* @input {boolean} If true, the element is selected.

src/components/datetime/datetime.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
1+
import { AfterContentInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
22
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
33

44
import { Config } from '../../config/config';
@@ -267,7 +267,7 @@ import { dateValueRange, renderDateTime, renderTextFormat, convertDataToISO, con
267267
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DateTime, multi: true } ],
268268
encapsulation: ViewEncapsulation.None,
269269
})
270-
export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {
270+
export class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
271271

272272
_text: string = '';
273273
_min: DateTimeData;
@@ -425,7 +425,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit,
425425
/**
426426
* @hidden
427427
*/
428-
ngAfterViewInit() {
428+
ngAfterContentInit() {
429429
// first see if locale names were provided in the inputs
430430
// then check to see if they're in the config
431431
// if neither were provided then it will use default English names

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -144,23 +144,23 @@ describe('DateTime', () => {
144144
describe('writeValue', () => {
145145

146146
it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
147-
datetime.ngAfterViewInit();
147+
datetime.ngAfterContentInit();
148148
datetime.writeValue('1994-12-15T13:47:20.789Z');
149149

150150
expect(datetime._text).toEqual('Dec 15, 1994');
151151
}));
152152

153153
it('should updateText with pickerFormat when no displayFormat', zoned(() => {
154154
datetime.pickerFormat = 'YYYY';
155-
datetime.ngAfterViewInit();
155+
datetime.ngAfterContentInit();
156156
datetime.writeValue('1994-12-15T13:47:20.789Z');
157157

158158
expect(datetime._text).toEqual('1994');
159159
}));
160160

161161
it('should updateText with displayFormat when no pickerFormat', zoned(() => {
162162
datetime.displayFormat = 'YYYY';
163-
datetime.ngAfterViewInit();
163+
datetime.ngAfterContentInit();
164164
datetime.writeValue('1994-12-15T13:47:20.789Z');
165165

166166
expect(datetime._text).toEqual('1994');
@@ -172,7 +172,7 @@ describe('DateTime', () => {
172172

173173
it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
174174
datetime.monthShortNames = customLocale.monthShortNames;
175-
datetime.ngAfterViewInit();
175+
datetime.ngAfterContentInit();
176176
datetime.setValue('1994-12-15T13:47:20.789Z');
177177

178178
datetime.generate();
@@ -186,7 +186,7 @@ describe('DateTime', () => {
186186

187187
it('should generate with only displayFormat', zoned(() => {
188188
datetime.monthShortNames = customLocale.monthShortNames;
189-
datetime.ngAfterViewInit();
189+
datetime.ngAfterContentInit();
190190
datetime.displayFormat = 'YYYY';
191191
datetime.setValue('1994-12-15T13:47:20.789Z');
192192

@@ -199,7 +199,7 @@ describe('DateTime', () => {
199199

200200
it('should generate with only pickerFormat', zoned(() => {
201201
datetime.monthShortNames = customLocale.monthShortNames;
202-
datetime.ngAfterViewInit();
202+
datetime.ngAfterContentInit();
203203
datetime.pickerFormat = 'YYYY';
204204
datetime.setValue('1994-12-15T13:47:20.789Z');
205205

@@ -212,7 +212,7 @@ describe('DateTime', () => {
212212

213213
it('should generate with custom locale short month names from input property', zoned(() => {
214214
datetime.monthShortNames = customLocale.monthShortNames;
215-
datetime.ngAfterViewInit();
215+
datetime.ngAfterContentInit();
216216
datetime.pickerFormat = 'MMM YYYY';
217217
datetime.setValue('1994-12-15T13:47:20.789Z');
218218

@@ -227,7 +227,7 @@ describe('DateTime', () => {
227227

228228
it('should generate with custom locale full month names from input property', zoned(() => {
229229
datetime.monthNames = customLocale.monthNames;
230-
datetime.ngAfterViewInit();
230+
datetime.ngAfterContentInit();
231231
datetime.pickerFormat = 'MMMM YYYY';
232232
datetime.setValue('1994-12-15T13:47:20.789Z');
233233

src/components/range/range.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
1+
import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
22
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
33

44
import { clamp, isTrueProperty } from '../../util/util';
@@ -104,7 +104,7 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
104104
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
105105
encapsulation: ViewEncapsulation.None,
106106
})
107-
export class Range extends BaseInput<any> implements AfterViewInit, ControlValueAccessor, OnDestroy {
107+
export class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
108108

109109
_dual: boolean;
110110
_pin: boolean;
@@ -266,7 +266,7 @@ export class Range extends BaseInput<any> implements AfterViewInit, ControlValue
266266
/**
267267
* @hidden
268268
*/
269-
ngAfterViewInit() {
269+
ngAfterContentInit() {
270270
this._initialize();
271271

272272
// add touchstart/mousedown listeners

src/components/searchbar/searchbar.ts

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -172,15 +172,6 @@ export class Searchbar extends BaseInput<string> {
172172

173173
@ViewChild('cancelButton', {read: ElementRef}) _cancelButton: ElementRef;
174174

175-
/**
176-
* @hidden
177-
* After View Checked position the elements
178-
*/
179-
ngAfterViewInit() {
180-
this._initialize();
181-
this.positionElements();
182-
}
183-
184175
/**
185176
* @hidden
186177
* On Initialization check for attributes
@@ -196,11 +187,9 @@ export class Searchbar extends BaseInput<string> {
196187
* @hidden
197188
*/
198189
_inputUpdated() {
199-
if (this._searchbarInput) {
200-
var ele = this._searchbarInput.nativeElement;
201-
if (ele) {
202-
ele.value = this.value;
203-
}
190+
const ele = this._searchbarInput.nativeElement;
191+
if (ele) {
192+
ele.value = this.value;
204193
}
205194
this.positionElements();
206195
}
@@ -229,9 +218,6 @@ export class Searchbar extends BaseInput<string> {
229218
}
230219

231220
positionPlaceholder() {
232-
if (!this._searchbarInput || !this._searchbarIcon) {
233-
return;
234-
}
235221
const inputEle = this._searchbarInput.nativeElement;
236222
const iconEle = this._searchbarIcon.nativeElement;
237223

@@ -265,9 +251,6 @@ export class Searchbar extends BaseInput<string> {
265251
* Show the iOS Cancel button on focus, hide it offscreen otherwise
266252
*/
267253
positionCancelButton() {
268-
if (!this._cancelButton || !this._cancelButton.nativeElement) {
269-
return;
270-
}
271254
const showShowCancel = this._isFocus;
272255
if (showShowCancel !== this._isCancelVisible) {
273256
var cancelStyleEle = this._cancelButton.nativeElement;

src/components/searchbar/test/basic/pages/root-page/root-page.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,10 @@ <h5 padding-left> Search - Animated and No Cancel</h5>
4444
<p padding>
4545
<button ion-button block (click)="changeValue()">Change Value</button>
4646
</p>
47+
48+
<button ion-button (click)="activeTab = 'a'">Error Please</button>
49+
<div *ngIf="activeTab == 'a'">
50+
<ion-searchbar animated="true" [showCancelButton]="true"></ion-searchbar>
51+
</div>
52+
4753
</ion-content>

src/components/searchbar/test/basic/pages/root-page/root-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export class RootPage {
1313
isAutocorrect: string = 'on';
1414
isAutocomplete: string = 'on';
1515
isSpellcheck: boolean = true;
16+
activeTab = '';
1617

1718
constructor(private changeDetectorRef: ChangeDetectorRef) {
1819

src/components/segment/segment.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
1+
import { AfterContentInit, ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
22
import { NgControl } from '@angular/forms';
33

44
import { Config } from '../../config/config';
55
import { BaseInput } from '../../util/base-input';
6+
import { assert } from '../../util/util';
67
import { SegmentButton } from './segment-button';
78

89
/**
@@ -67,7 +68,7 @@ import { SegmentButton } from './segment-button';
6768
'[class.segment-disabled]': '_disabled'
6869
}
6970
})
70-
export class Segment extends BaseInput<string> {
71+
export class Segment extends BaseInput<string> implements AfterContentInit {
7172

7273
/**
7374
* @hidden
@@ -86,7 +87,7 @@ export class Segment extends BaseInput<string> {
8687
/**
8788
* @hidden
8889
*/
89-
ngAfterViewInit() {
90+
ngAfterContentInit() {
9091
this._initialize();
9192
this._buttons.forEach(button => {
9293
button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
@@ -98,12 +99,14 @@ export class Segment extends BaseInput<string> {
9899
* Write a new value to the element.
99100
*/
100101
_inputUpdated() {
101-
if (this._buttons) {
102-
var buttons = this._buttons.toArray();
103-
var value = this.value;
104-
for (var button of buttons) {
105-
button.isActive = (button.value === value);
106-
}
102+
if (!this._buttons) {
103+
assert(false, 'buttons are undefined');
104+
return;
105+
}
106+
const buttons = this._buttons.toArray();
107+
const value = this.value;
108+
for (var button of buttons) {
109+
button.isActive = (button.value === value);
107110
}
108111
}
109112

src/components/select/select.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
1+
import { Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
22
import { NG_VALUE_ACCESSOR } from '@angular/forms';
33

44
import { ActionSheet } from '../action-sheet/action-sheet';
@@ -147,7 +147,7 @@ import { SelectPopover, SelectPopoverOption } from './select-popover-component';
147147
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true } ],
148148
encapsulation: ViewEncapsulation.None,
149149
})
150-
export class Select extends BaseInput<any> implements AfterViewInit, OnDestroy {
150+
export class Select extends BaseInput<any> implements OnDestroy {
151151

152152
_multi: boolean = false;
153153
_options: QueryList<Option>;

src/util/base-input.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
1+
import { AfterContentInit, ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
22
import { ControlValueAccessor } from '@angular/forms';
33
import { NgControl } from '@angular/forms';
44

@@ -10,7 +10,7 @@ import { Form } from './form';
1010
import { TimeoutDebouncer } from './debouncer';
1111

1212

13-
export interface CommonInput<T> extends ControlValueAccessor {
13+
export interface CommonInput<T> extends ControlValueAccessor, AfterContentInit {
1414

1515
id: string;
1616
disabled: boolean;
@@ -271,7 +271,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
271271
/**
272272
* @hidden
273273
*/
274-
ngAfterViewInit() {
274+
ngAfterContentInit() {
275275
this._initialize();
276276
}
277277

0 commit comments

Comments
 (0)