Popover blocks user from being able to type in searchbar

Ionic Framework
1

Please describe the question in detail and share your code, configuration, and other relevant info.
I have an ion-search bar which makes an api call and returns a list that matches the filtered search. I display that list underneath the search bar using an ion-popover with a list of items returned from the search. Once a user selects the item it is displayed in the ion-search bar. My issue is after i open the popover with the filtered list the user is no longer able to type into the searchbar unitl after i dismiss the popover. Is there anyway to to make the popover or backdrop not take up the full screen so the user can still type in the input.

<ion-list >
      <ion-searchbar sticky  [value]='selectedSic' showClearButton='always' inputmode='search' placeholder="Enter description or SIC"

          type="text" debounce="500" [formControl]="overrideFormControl" (ionChange)="getItems($event)">

 </ion-searchbar>

 <div>

    </div>
  </ion-list>        

async presentPopover() {

     console.log("insside modal list")

    const popover = await this.popover.create({

      component: ModalListComponent ,

      componentProps: {sicArray: this.siccodeArray},

   

      cssClass: 'popover_setting',

      showBackdrop: false,

     

    });

    popover.onDidDismiss().then((result) => {

      console.log("onDidDismiss: ", result.data);

      this.selectedSic = result.data;

    });

    return await popover.present();

    /** Sync event from popover component */

 

}

20211102_1301001
20211102_13010011920×1920 922 KB

3

Do you have a sample app I can run?

4

Isnt it the design of popover for it to take the full foreground and not allow any interactions unless dismissed?

I believe if u like to have such design underneath the search bar, shouldn’t u be using an ioncard?

What are u expecting to happen with the list as well as the popthingcard when the user types something new? If the list should change the user cannot see the results because if the popthingcard. And which of the items should be show on the popthingcard if the search changes?

I short: maybe describe the desired UI and then we can recommend components instead of trying to fit a component in a design for which it might not be intended?