How can I focus on my searchbar when I enter a tab?

Ionic Framework Ionic Angular
1

Hello. I am trying to focus on my searchbar when I open the third tab (tab3) of my app. I would like the searchbar to be in focus every time when I navigate to tab3, whether that be by pressing the tab button at the bottom of the display or by using routerLink="/tabs/tab3" routerDirection="root" to navigate to tab3. I already took a look at the official Ionic documentation but I am not sure on how to use or implement setFocus. Apologies if I am not using any correct terminology; I am new to coding. Any help would be greatly appreciated :slight_smile:

Here is my tab3.page.html

<div>
  <ion-searchbar animated showCancelButton="focus" cancelButtonText="Cancel"></ion-searchbar>
</div>

And here is my tab3.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tab3',
  templateUrl: './tab3.page.html',
  styleUrls: ['./tab3.page.scss'],
})

export class Tab3Page implements OnInit {
  constructor( ) { }
  ngOnInit( ) {
  }
}
2

like this you can for searchbar too

1 Like
3

Thank you so much for the response! :slight_smile: The searchbar now focuses when entering tab3 of my app. I also used this article for guidance and it works as well.