Ionic 3 - вручную вызвать событие размытия

Question

Я хотел бы знать, есть ли возможность вручную вызвать событие размытия для элемента ion-input?

Лучше всего было бы использовать метод native-native, но подойдет любой трюк, основанный на javascript..

Моя конфигурация:

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.1.1
   @ionic/app-scripts : 1.3.7

System:

   NodeJS : v6.10.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/bin/node)
   npm    : 3.10.10
   OS     : macOS High Sierra

Мой HTML-файл:

<div>    
   <ion-input (click)="openModal(fieldName)" [placeholder]="placeholder" #searchInput>
   </ion-input>
</div>

Файл моего компонента:

export class MyClass implements OnInit {

   @ViewChild('searchInput') searchInput: any;

   foo(): void {
      this.searchInput.blur();
   }
}

Триггеры this.searchInput.blur()следующая ошибка:

TypeError: this.searchInput.setBlur не является функцией.(В 'this.searchInput.setBlur ()' this.searchInput.setBlur 'не определено)

Answer 1

Самый простой способ программно размыть элемент - сначала получить элемент с помощью @ViewChild, а затем вызвать .setBlur() для этого элемента.Что-то вроде:

export class HomePage {
  @ViewChild('myInput') myInput;

  onBlurClicked() {
    this.myInput.setBlur();
  }
}

И в своем шаблоне сделайте что-то вроде <ion-input #myInput></ion-input> для своего ввода и создайте кнопку с обратным вызовом события click для onBlurClicked.Я поместил рабочий пример стекаблица здесь: https://stackblitz.com/edit/ionic-blank-3-9-2-owhgpf

edit: поскольку это не похоже на работу с вашей версией ionic, вы можете попробовать размывать нативный элемент напрямую, например:

export class HomePage {
  @ViewChild('myInput', { read: ElementRef }) myInput: ElementRef;

  onBlurClicked() {
    // Call the vanilla js .blur() method on the native element.
    this.myInput.nativeElement.blur();
  }
}