Ionic set Focus programmatically - css

Question

I am using ionic with angular in a component and I am trying to set focus programmatically after the page loads up.
This 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;
}
None of the above is setting the focus on the given item. I have tried to set the focus in AfterViewInit and in AfterViewChecked - the same effect (none).
Tabbing to set the focus works fine and the styling is being applied, but I can't seem to be able to get the focus programmatically.

Answer 1

So maybe not exactly what you would want to hear but I will try to help with the following:
Browser support for such behavior is fragmented: Safari and Chrome have different "policy" of how this should work, and to say it simple - modern Safari wants only end user explicit interaction to call focus on elements, while Chrome should allow you to do what you are trying to do.
The .focus method itself is only applicable to specific standard web elements: input, button etc
The HTMLElement.focus() method sets focus on the specified element, if it can be focused.
Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
in your case you are trying to apply it to Ionic component ion-select which unfortunately does not have focusable elements.
See this stackblitz and look at the console and you will see that ion-select does not really have a native button element (it is another component that uses "span" & div etc).
So essentially you are trying to apply focus to elements that do not take on focus programmatically.
If you can explain what UX you are trying to achieve - maybe that can be achieved in a different manner?
For example you could call .open() method that ion-select supports to open up the selector on load:
https://stackblitz.com/edit/ionic-r8issn
You would basically leverage normal API from here: https://ionicframework.com/docs/api/components/select/Select/#open