In my Ionic and Angular component, I am attempting to programmatically set focus after the page has loaded. Here is the code:
item.component.html:
<ion-row>
<ion-col col-5>
<ion-item >
<ion-label>Departure Port</ion-label>
<ion-select #selected class="selector" formControlName="control"
[(ngModel)]="modelItem"
(click)="selectItem()">
<ion-option
*ngFor="let item of [{code:item.code, desc:item.desc}]"
value="{{item.code}}">
{{item.desc}} ({{item.code}})
</ion-option>
</span>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
item.component.ts
export class Item Component implements OnInit, AfterViewInit, AfterViewChecked {
@ViewChild('selector')
private selectorElRef: Select;
public ngAfterViewInit(): void {
this.portSelectorElRef.setFocus();
}
I have also tried this:
@ViewChild('selector')
private selectorElRef: Select;
public ngAfterViewInit(): void {
this.portSelectorElRef.getElementRef().nativeElement.focus();
}
And this:
@ViewChild('selector')
private selectorElRef: Select;
public ngAfterViewInit(): void {
this.portSelectorElRef.getNativeElement.focus();
}
variables.scss
*:focus {
border: solid $primary-color 2px;
box-shadow: 5px 10px 8px $primary-color;
}
Despite trying different methods in AfterViewInit and AfterViewChecked to set focus on the item, it does not work as expected. Tabbing works fine and styling is applied, but setting focus programmatically is unsuccessful.