Блог

Мне нужно выполнить цикл с расширенным элементом управления наложением. Как только наложение расширено, я хочу циклически просматривать входные элементы, пока наложение не будет свернуто. У меня есть код, работающий до определенной точки, то есть, как только наложение становится видимым, мой фокус устанавливается на первый элемент ввода и циклически переходит к последнему элементу «кнопка».

Моя проблема в том, что код, который я добавил, чтобы я мог циклически обходить расширенное наложение, работает не так, как ожидалось.

Этот фрагмент кода изначально устанавливает фокус на первый элемент ввода

 @ViewChild('focusShortCode', { static: true }) nameField: ElementRef;
public setFocus(isSet: boolean) {
        if (isSet) {
          this.nameField.nativeElement.focus();
        }
      }
  

Предполагается, что этот фрагмент кода снова вернет фокус на первый элемент ввода

  public onBlur(isSet: boolean) {
    if (isSet) {
      this.nameField.nativeElement.focus();
    }
  }
  

Проблема в том, что при вызове ‘onBlur’ мой фокус переходит на второй элемент ввода в моем расширенном наложении

onblur устанавливает фокус на элемент ‘name’, а не на элемент ‘shortCode’

 <div class="container">
<div class="layout-box" igxLayout igxLayoutJustify="end">
  <div class="layout-box__el" >
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput #focusShortCode name="shortCode" type="text" [value]="shortCode" />
      <label igxLabel  for="shortCode">{{shortCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="name" type="text" [value]="name" />
      <label igxLabel for="name">{{namePlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>
<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="street1" type="text" [value]="street1" />
      <label igxLabel for="street1">{{street1PlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
    <input igxInput name="street2" type="text" [value]="street2"/>
      <label igxLabel for="street2">{{street2PlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>

<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="city" type="text" [value]="city"/>
      <label igxLabel for="city">{{cityPlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="country" type="text" [value]="county"/>
      <label igxLabel for="country">{{countyPlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>

<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="postCode" type="text" [value]="postCode"/>
      <label igxLabel for="postCode">{{postCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="float: right; width: 100px;" >
      <input igxInput name="country" type="text" [value]="country" />
      <label igxLabel for="country">{{countryCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div>
    <button class="igx-button--raised" #buttonElement igxButton (keydown.Tab)="onBlur(true)">Close</button>
  </div>

</div>
</div>
  

При перезаписи логики, применяемой при нажатии клавиши, щелчке кнопки и т.д. необходимо убедиться, что поведение по умолчанию предотвращено. Поскольку нажатие клавиши является отменяемым событием, вы можете передать аргумент события обработчику и отменить его с помощью event.preventDefault(). До этого мог быть вызван метод event.stopPropagation(), чтобы предотвратить переполнение события:

 document.getElementById("buttonElement")
        .addEventListener("keydown", (event) => {
            if (event.key === "Tab") {
                //focus the first element
                this.firstElem.focus();
                //stop the default behaviour
                event.stopPropagation();
                event.preventDefault();
            }
        });
  

Небольшой пример, иллюстрирующий мое предложение с использованием igxInputGroup и IgxOverlayService, доступен здесь:https://stackblitz.com/edit/cycle-through-elems-in-overlay