Flip: check all placements

Let’s say I have this generic Popover component that allows specifying a placement, but defaults to “auto”:

import { Placement, flip, useFloating, autoPlacement } from '@floating-ui/react-dom-interactions';

export type PopoverPlacement = 'auto' | Placement;

interface Props {
  /**
   * Placement of the tooltip (default: 'auto')
   */
  placement?: PopoverPlacement;
}

const Popover = ({
  placement = 'auto',
}: Props) => {
  const [open, setOpen] = React.useState(false);
  const data = useFloating({
    placement: placement === "auto" ? undefined : placement,
    open,
    onOpenChange: setOpen,
    middleware: [
      placement === "auto" ? autoPlacement() : flip(),
    ],
  });

  return (
    <div />
  );
};

In order to allow both a specific placement and a specific placement, this conditional logic is necessary in several places, which already feels cumbersome to use TBH -

Now, one instance of this component has specified <Popover placement="right". This means that the flip logic will turn on instead of the fully automated logic. On some screen sizes, however, it won’t fit on the right,. It won’t fit on the left, either - which is the only side the flip modifier will check by default. The only option where it can fit is “top”. Right now flip checks if it can fit on right, or left, which it does not, so it will put it on the right, which will still cause overflow.

Now, I know it is possible to specify the fallback placements to the modifier. To do this, there are three options:

1. I might make the fallback placements another prop on my component and leave this configuration fully to the consumers of my component.
2. I might create a static map of fallback placements and use it in my component, passing it always forward to floating-ui.
3. The static map of fallback placements could live in floating-ui, resolving such issues for all consumers of this library.

My question is - why not 3, why should this kind of logic have to live on the consumer side? I don’t think anyone realistically wants to get overflow if there is any chance of avoiding it by changing the placement automatically. What I as a consumer of this lib would want, is to have a single placement modifier, that I can nudge to my preferred placement - but any other would also be fine. As an alternative, some simpler way of doing fallbackPlacement: [oppositePlacement, ...restOfPlacements] would also work, but as this needs to be computed based on the preferred placement, to me it seems like it will potentially be duplicated in a lot of codebases (or if not implemented, the components can be more buggy). Any thoughts?

[atomiks]

No, as they’re separate now. But as I mentioned in https://github.com/floating-ui/floating-ui/issues/2051#issuecomment-1359374526, I think flip() should default to [oppositePlacement, auto] when using bestFit (also the default). I think @mihkeleidast is right that the default should be better, and some users already expect that to work like #2018.

Popper had some ambiguities like if you did something like ['auto', 'right'] which didn’t really make sense.

A custom middleware can do it as of now: https://codesandbox.io/s/ecstatic-engelbart-7dzy01?file=/src/App.tsx (with the caveat that it won’t go back to the flip strategy after resizing back to a wider screen, although that doesn’t matter much, especially for a transient tooltip).

[FezVrasta]

I see, yes what you describe makes a lot of sense.