Respect the allowedPlacements order if the floating UI doesn't overflow.

[psuzn]

I have this setup.

  const { refs, floatingStyles, context } = useFloating({
      open: isOpen,
      onOpenChange: setIsOpen,
      middleware: [
          offset(() => {
              return {
                  mainAxis: 12,
              };
          }),
          autoPlacement({
              allowedPlacements: ["top", "right"],
          }),
      ],
  });

Screen.Recording.2024-05-15.at.09.39.48.mov

I'd like it to place floating content on the top and then only fall back to the right position if it doesn't fit on top.

Not sure if there is already a way to achieve this. If there is not this can be achieved by respecting the order in which the allowedPlacements are provided and only placing the item to the next position if it overflows on current.

[atomiks]

I'd like it to place floating content on the top and then only fall back to the right position if it doesn't fit on top.

Instead of autoPlacement, use flip with fallbackPlacements.

[psuzn]

that works, thank you.