CODEWITHSUNDEEP
reactjsionic-framework
Fewl
Fewl

Reputation: 55

Ionic popover with React - How to make it sticky to the button

Following the Ionic documentation, I am trying to get the popover sticky to the button (like on their own example). Unfortunately I do not know how to achieve this... Thanks

import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';

export const PopoverExample: React.FC = () => {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <>
      <IonPopover
        isOpen={showPopover}
        onDidDismiss={e => setShowPopover(false)}
      >
        <p>This is popover content</p>
      </IonPopover>
      <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
    </>
  );
};

Upvotes: 4

Views: 1519

Answers (1)

James Brightman
James Brightman

Reputation: 935

You also need to include an event in the showPopover hook - 

const [showPopover, setShowPopover] = useState<{open: boolean, event: Event | undefined}>({
  open: false,
  event: undefined,
});

<IonPopover
    isOpen={showPopover.open}
    event={showPopover.event}
    onDidDismiss={e => setShowPopover({open: false, event: undefined})}
>
   <p>This is popover content</p>
</IonPopover>
<IonButton onClick={(e) => setShowPopover({open: true, event: e.nativeEvent})}>Click</IonButton>

Upvotes: 15

Related Questions