How to close a popover in ionic/react?

I’m using Ionic version 6.10.1 to build an app. Precisely, I’m using ionic with react syntax.

In my app, I wanted to use a popover component. It works perfectly, the popover is shown and I can do something with it but I can only close it when I click outside and not from a button. Basically, I integrated two buttons in my popover. A cancel and okay buttons. I want to close my popover when I click okay or cancel but I couldn’t do that.

The example in the docs have a close button already and it works when I click it. However, the source code is written in javascript and somehow it looks like alien language. I didn’t understand literally nothing.

I noticed there are also other examples with ionic/angular but I have no idea about angular. In fact I started learning react this week so I’m a beginner.

Basically, what I want is a minimal example in ionic/react which shows how can this be done. I appreciate any help. Thanks in advance

Isn’t this example what you want? Just select the React tab to see the React code.

Hi, No. This is showing how to open the popover. But how can I close it? I don’t want to close it when I click somewhere outside. As I explained I have two buttons inside the popover, the first is an OK button and the other is a Cancel button. I want to dismiss when I click Ok or Cancel. There is absolutely no resources out there to show how to do this with react.

There are example of angular and js only. Basically what I want is like the picture shown in the docs up right. when I click on close then the popover should be dismissed. Do you know how to do this with react ?

I’m already using state of course. so I’m calling the setState(false) to close the popover when I click the button but somehow this is did not work

In that example, by setting the showPopover state variable to false, as shown in the onDismiss handler. You just need to do the same when the user clicks one of your custom buttons.

Here’s a quick demo.

1 Like

It’s interesting. Now I know why it didn’t work in my code. I’m using the popover inside a sliding component. Like this:

<IonItemSliding>

    <IonItemOptions side="start">

      <IonItemOption onClick={(e) => setShowPopover(true)}>Favorite

      <IonPopover backdropDismiss 

    keyboardClose

    showBackdrop

    isOpen={showPopover}

    onDidDismiss={e => setShowPopover(false)}>

<p>Select Priority and Time To Live</p>

    <IonButton onClick={() => setShowPopover(false)}>dismiss</IonButton>

    </IonPopover>
</IonItemOption>
    </IonItemOptions>

    <IonItem>

      <IonLabel>Item Options</IonLabel>

    </IonItem>

    <IonItemOptions side="end">

      <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>

    </IonItemOptions>

  </IonItemSliding>

It wasn’t working because I wrapped my popover inside ItemOption. It was stupid from me. Anyway thanks very much for the help. I appreciate Your reproducable example although I achieved it myself. I will accept your answer :wink: Thanks