CODEWITHSUNDEEP
javascriptionic-framework
Alezco05
Alezco05

Reputation: 483

Close a modal with the cancel button of an ion-searchbar

I have a search button, which opens a modal that contains an ion-searchbar , but the problem is that I don't know how I can close the modal with the cancel button that ionic brings by default. This is my code:

  <ion-header>
    <ion-toolbar color="light">
      <ion-buttons slot="start">
        <ion-button>
          <ion-icon slot="icon-only" name="person-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="primary">
        <!-- THE MODAL -->
        <ion-button  (click)="showModal()">
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

TS

async showModal() {
    const modal = await this.modalController.create({
      component: SearchModalPage
    });
    return await modal.present();
  }

Search Modal

<ion-header>
    <ion-searchbar showCancelButton="focus"></ion-searchbar>
</ion-header>

<ion-content>

</ion-content>

When I click the Cancel Button of the search bar this message show up :

[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Upvotes: 0

Views: 1361

Answers (1)

Alezco05
Alezco05

Reputation: 483

The ion-searchbar has a method call ionCancel when the cancel button is clicked, I only have to close the modal on click.

The HTML

<ion-header>
    <ion-searchbar showCancelButton="always" (ionCancel)="close()"></ion-searchbar>
</ion-header>

TS

export class SearchModalPage implements OnInit {

  constructor(private modalCtrl: ModalController) { }

  ngOnInit() {
  }
  close(){
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

Upvotes: 1

Related Questions