Trigger blur event on ion-button

Question

I am trying to have the focus be removed from an ion-button based on certain conditions. I use CSS to change the colour of the button once it is selected, and I want this "active" state removed conditionally.

ion-button.ion-color-primary:active {
    --ion-color-base: #fff !important;
    --ion-color-contrast: var(--ion-color-primary) !important;
    border: 1px solid var(--ion-color-primary);
}

In short, the functionality I am after is something like:

If the user chose an answer and the answer is incorrect, then it should no longer have focus.

I have tried the below code, based on another post that shows how to manage focus with an input field, but it does not seem to work and generates an "is not a function" error:

HTML

 <ion-button (click)="checkTrue()" color="primary"id="next" #next>Next</ion-button> 

TypeScript

@ViewChild('next') nextBtn: any;

checkTrue(){
   if(conition === true){
      this.nextBtn.blur();
   }
}

I also noticed in the documentation that there is an event called "ionBlur" on a button, so you can set things in motion on a blur event on a button. I am not finding a way of triggering the blur event however.

Finally, I came across this post that was doing something similar. I tried applying it without any luck. Before even adding any of the suggested code, I noticed that the "active" class briefly gets added to the button. It however gets removed practically imminently, but the styling for the button is still displaying as having focus.

Does anyone have any advice on how to remove the "active" state from the ion-button? Any advice would be greatly appreciated!

Answer 1

You can do something like this,

<ion-button (click)="checkTrue()" [ngClass]="{'conition' : active}" color="primary"id="next" #next>Next</ion-button> 

You just need to do this in HTML file and in ts in checkTrue function you need to just check connition variable's value and set it true or false.