Ионный набор Фокус программно

Question

Я использую ионный с угловым в компоненте, и я пытаюсь установить фокус программно после загрузки страницы.Это код

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();
  }

Я также пробовал это:

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.getElementRef().nativeElement.focus();
  }

И это:

 @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;
}

Ничто из вышеперечисленного не устанавливает фокус на данный элемент.Я попытался установить фокус в AfterViewInit и в AfterViewChecked - тот же эффект (нет).

Вкладка для установки фокуса работает нормально, и стиль применяется, но я не могу в состоянииполучить фокус программно.

Answer 1

Так что, возможно, не совсем то, что вы хотели бы услышать, но я постараюсь помочь со следующим:

1. Поддержка браузером такого поведения фрагментирована: политики Safari и Chrome имеют разную "политику".о том, как это должно работать, и, проще говоря, - современный Safari хочет, чтобы только явное взаимодействие с конечным пользователем вызывало фокусировку на элементах, в то время как Chrome должен позволять вам делать то, что вы пытаетесь сделать .

2. Сам метод .focus применим только к определенным стандартным веб-элементам : ввод, кнопка и т. Д.

Элемент HTMLEМетод .focus () устанавливает фокус на указанный элемент, если он может быть сфокусирован.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

в вашем случае вы пытаетесь применить его к ионному компонентуion-select, который, к сожалению, не имеет фокусируемых элементов.

Посмотрите на это stackblitz и посмотрите на консоль, и вы увидите, что ion-select на самом деле не имеет собственного элемента кнопки (этодругой компонент, который использует "span" и div и т. д.).

По сути, вы пытаетесь применить фокус к элементам, которые не фокусируются программно.

Если вы можете объяснить, какого UX вы пытаетесь достичь - возможно, этого можно достичь в другомманера?

Например, вы можете вызвать метод .open (), который поддерживает ion-select, чтобы открыть селектор при загрузке:

https://stackblitz.com/edit/ionic-r8issn

Вы бы в основном использовали рычагинормальный API отсюда: https://ionicframework.com/docs/api/components/select/Select/#open