fluentui usePopper: define boundaries with imperative handles

trafficstars

Describe the feature that you would like added

We need to allow define flipBoundary and overflowBoundary with imperative handles, similarly to setTarget.

function App() {
  const popperRef = React.useRef();
  const { targetRef, containerRef, arrowRef } = usePopper({
    popperRef
  });

  React.useEffect(() => {
    popperRef.setFlipBoundary(el);
  }, []);
}

Why?

Currently flipBoundary & overflowBoundary can be defined as elements only ➡️ this requires to use refs via React.useState():

function App() {
  const [flipBoundary, setFlipBoundary] = React.useState();

  return <div ref={setFlipBoundary} />;
}

This causes an additional re-render as such boundaries usually wrap a lot of components this results in performance issues. Using imperative handlers allows to avoid passing refs ➡️ additional re-renders.

What component or utility would this be added to

usePopper hook in @fluentui/react-positioning

Jan 18 '22 13:01 layershifter

The issue was updated to propose extending existing imperative handle. With the previous proposal (functions) we cannot handle updates of refs properly.

Mar 31 '22 09:03 layershifter

This has been northstar request, currently not blocking anybody.