Popover is behind element even with FloatingPortal

I am trying to use a FloatingPortal to take the floating elements outside the flow of the document.

However, I am still seeing odd behaviour when the popover should be on top of an element.

Current code:

MyPopover.js

const { x, y, reference, floating, strategy } = useFloating({
    placement: "bottom-start",
    middleware: [flip(), shift(), offset(5)],
 })

...
<>
    <Popover.Button 
       ref={reference} 
       className={contentContainerStyle} 
     />
    <Popover.Panel
      static
      ref={floating}
      style={{
        position: strategy,
        top: y ?? "",
        left: x ?? "",
      }}
    >
    ...
    </Popover.Panel>
</>

App.js

const AppWithStore = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <FloatingPortal>
          <App />
        </FloatingPortal>
      </PersistGate>
    </Provider>
  )
}

What am I missing to take the floating UI out of the flow of the document?

Versions: “@floating-ui/react-dom”: “^0.6.3”, “@floating-ui/react-dom-interactions”: “^0.3.1”,

[atomiks]

The FloatingPortal should only wrap the floating element, not the whole app. Further, you may need to set a z-index on the floating element if there are other positioned elements that can obscure it. isolation: isolate on the root app (not the floating portal node) may also help (cc: @FezVrasta still have no idea how that works lol)

[wmonecke]

The code in the docs was not working for me for some reason.

 useEffect(() => {
    if (!refs.reference.current || !refs.floating.current) {
      return;
    }
 
    // Only call this when the floating element is rendered
    return autoUpdate(
      refs.reference.current,
      refs.floating.current,
      update
    );
  }, [refs.reference, refs.floating, update]);

This is the only hack / code that managed to get it working:

 const isMountedRef = useRef(false)
  const { x, y, reference, floating, strategy, update, refs } = useFloating({
    placement: "bottom-center",
    middleware: [flip(), shift(), offset(5)],
  })


  useEffect(() => {
    if (isMountedRef.current) {
      return debounce(update, 100)
    }
    isMountedRef.current = true
  })