Triggering blur event manually in Ionic 3

Question

Triggering blur event manually in Ionic 3

Is there a way to manually trigger the blur event on an ion-input element?

The ideal scenario would be with an ionic-native method, but any javascript-based workaround will suffice.

My current configuration:

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 file :

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

Component file :

export class MyClass implements OnInit {

   @ViewChild('searchInput') searchInput: any;

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

The error triggered by this.searchInput.blur() is as follows:

TypeError: this.searchInput.setBlur is not a function. (In 'this.searchInput.setBlur()', 'this.searchInput.setBlur' is undefined)

javascript typescript ionic-framework ionic3

Answer 1

Answer №1

To blur an element programmatically, you can start by selecting the element using @ViewChild and then invoking .setBlur() on that element. Here's an example:

export class Page {
  @ViewChild('targetElement') targetElement;

  onBlurEvent() {
    this.targetElement.setBlur();
  }
}

In your HTML template, define the input element with

<input #targetElement></input>

, and create a button that triggers the onBlurEvent function. You can also check out a working demo on StackBlitz: https://stackblitz.com/edit/ionic-blank-3-9-2-owhgpf

If the above method doesn't work in your Ionic version, you can directly blur the native element like this:

export class Page {
  @ViewChild('targetElement', { read: ElementRef }) targetElement: ElementRef;

  onBlurEvent() {
    // Use vanilla JavaScript to trigger the .blur() method on the native element.
    this.targetElement.nativeElement.blur();
  }
}

Answer 2

To blur an element programmatically, you can start by selecting the element using @ViewChild and then invoking .setBlur() on that element. Here's an example:

export class Page {
  @ViewChild('targetElement') targetElement;

  onBlurEvent() {
    this.targetElement.setBlur();
  }
}

In your HTML template, define the input element with

<input #targetElement></input>

, and create a button that triggers the onBlurEvent function. You can also check out a working demo on StackBlitz: https://stackblitz.com/edit/ionic-blank-3-9-2-owhgpf

If the above method doesn't work in your Ionic version, you can directly blur the native element like this:

export class Page {
  @ViewChild('targetElement', { read: ElementRef }) targetElement: ElementRef;

  onBlurEvent() {
    // Use vanilla JavaScript to trigger the .blur() method on the native element.
    this.targetElement.nativeElement.blur();
  }
}

Triggering blur event manually in Ionic 3

Answer №1

Similar questions

Encountering a SyntaxError while utilizing framer-motion in Next JS

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Trigger a function upon change of selected value in Ionic 3

Typescript interface design for nested objects in a hierarchical structure

What is the best way to execute an Nx executor function using Node.js?

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

How to achieve dynamic class instantiation through constructor injection in Angular 8?

Receiving an error when attempting to import a function and access props using the "this" keyword: "TypeError: Unable to retrieve property 'renderElapsedString' as it is undefined"

Specifying the type of "this" within the function body

What should I do to resolve the error message TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a valid function?

"Encountering a Javascript issue while trying to apply a CSS class to a

TSLint is unable to locate a custom module containing a custom d.ts file

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

Error: AppModule requires an array of arguments in order to function properly

Unable to delete a row from a dynamically generated table using jQuery

React redux-thunk promise is currently in a state of waiting

The dropdown menu is not able to retrieve information from the secondary database

There seems to be a problem fetching the WordPress menus in TypeScript with React and Next

Leveraging Next.js for "client-side rendering" in React Encapsulations