Ionic/react - Popover not showing when

Ionic Framework
1

I’m having issues showing popover when it is positioned on the same as item with an onClick event.
Here’s my code:


          <IonPopover
            isOpen={showPopover}
            onDidDismiss={e => {
              e.preventDefault();
              console.log('Popover for chapter actions selected.')
              setShowPopover(false);
            }}>
            <IonLabel>Delete</IonLabel>
          </IonPopover>

          <IonItem
            lines="none"
            button key={id}
            onClick={e => {
              e.preventDefault();
              props.history.push(`/some-link`, { heading .title, url: });
            }}>
         
            <IonLabel slot="start">
              <h2>{title}</h2>
              <h3>{uploaded_by}</h3>
              <h4>{releaseDate}</h4>
            </IonLabel>
         
            <IonButtons slot="end">
              <IonButton
                onClick={e => {
                  e.preventDefault();
                  setShowPopover(true);
                }}
              >
                <IonIcon icon={more} />
              </IonButton>
            </IonButtons>
          </IonItem>

Per the code above, when the icon to show the popover is clicked, i’m being redirected to the next page instead.

item click and popover
item click and popover972×308 29.3 KB

2

Did you try putting the onclick on the label and not the whole item?

3

According to the snippet, no. What I want to achieve is the ability to click on the item to view the page as well as the ability to view action options when clicking the icon.

4

so maybe try my suggestion… put a clicked event on the label and a click event on the IonButton and you should be go to go

5

Ok. That was what I Initially did before opt-in for onclick item. I reverted back to your suggestion as that’s plausible solution for now.
Thanks for your help and time.