React ref ion-popover

Hi,
I am trying to use IonPopover in an ionic react app.
I cant get a ref on IonPopover, but I can have one on an IonInput using the same method.

I watched in the ionic doc for popover : https://ionicframework.com/docs/api/popover
and got into the code of the popover example : https://github.com/ionic-team/ionic-docs/blob/e0b59b58eb36ed5ff8f9ff14cb862d207d8145a3/src/demos/api/popover/index.html

The code seems weird. Is it possible that there are some issues with this component that require some workaround ? And could this explain why I cant get a ref on an IonPopover ?

Thanks by advance
Arthur

1 Like

You can use your browser’s Inspect Element command to confirm that the ion-popover element does not exist in the DOM when the popover is not displayed. So there is no element to get a reference to, unless the popover is open.

Why do you need a ref to the popover? Generally you would only need it if you plan to manipulate the HTML element manually. If you can describe your use case I might be able to suggest an alternative way to accomplish what you’re trying to do.

use the onWillPresent handler to get the ref and do what you need to do before the ion-popover is rendered on the screen.

  const inputEl = useRef(null);
  const [show,setShow] = useState(false);
  const beforeRendering = () => {
    console.log(inputEl.current)
  }
<IonPopover ref={inputEl} 
  isOpen={show}  
  onWillPresent={()=> beforeRendering()}>
  <p>This is popover content</p>
</IonPopover>

Hi,

@jpisello, I think you are right, I cannot get the ref because the element is not inside the DOM.

Here is my use case:
I want to place the popover just under a text input field when it gets focused.
From what I understood, I need to pass the focus event from my input field to the present method of the popover to place it under it, and not in the center of the screen.
That is why I wanted to get a ref on the popover.

1 Like

The solution I provided should work, have you tried it yet?

I’m trying to find a solution to this as well. I want the Popover to appear within context of the clickable element that opened it. Are there undocumented properties that we’re not seeing for React here? https://ionicframework.com/docs/api/popover#properties

@arctos I found the solution by hacking together some other threads related to the Popover. I have no idea where this is documented. Try this:

const [ show, setShow ] = useState(false);
const [ popoverEvent, setPopoverEvent ] = useState();

return (
  <>
      <IonButton onClick={e => { e.persist(); setPopoverEvent(e); setShow(true); }}>Show Me</IonButton>
      <IonPopover
        isOpen={show}
        onDidDismiss={() => setShow(false)}
        event={popoverEvent}
      >
      Content Here
      </IonPopover>
  </>



)

Need e.persist() and event={popoverEvent}
This seems hacky to me - to have to save the event as state. It’d be much nicer to pass a contextElement property so we could do:

const buttonRef = useRef();

<IonButton ref={buttonRef}>...</IonButton>
<IonPopover contextElement={buttonRef.current} ... />

Thank you all for your answers.
I did not test any of these, as I do not need to use popover anymore.
It seems that @aaronksaunders and @jamiechong solutions could work. But they both seems a bit hacky.
Hoping popovers will be improved in the next version.