Configure flip modifier to avoid restoring original placement after update

In this example, we are using Popper with a preferred placement of top-start along with the flip modifier.

When the popper originally mounts, it shows a loading spinner. The flip modifier comes into action and correctly overrides the preferred placement so that the popper doesn’t overflow.

When the content finishes loading, the popper size changes. We are calling update any time the size changes via a ResizeObserver. This time, the popper is smaller in height so it doesn’t need to be flipped.

https://user-images.githubusercontent.com/921609/142389942-5a18b92c-1af9-4836-a79a-299bbe32e659.mov

This results in a fairly jarrying user experience—especially if the content loads quickly meaning the load state will appear as a flash.

I think the ideal user experience would be to preserve the placement that was originally applied by the flip modifier after we call update, rather than reverting to the preferred placement. We should only revert to the preferred placement if we need to, so the popper position doesn’t change.

[atomiks]

we don’t have the information to make an informed decision on whether or not to preserve the flipped position. I don’t think it’s as simple as “always preserve the flipped position” because we need to consider that the “flipped position” may no longer be valid, e.g. it now overflows.

If you set the placement to the flipped one on the update, it’s still fine because it will know to flip again to the opposite placement, which was previously the original one

[FezVrasta]

Ok I see, it makes sense. I think you can achieve that by setting the placement to the result of the previous flip result right now, but an option would be a nice idea.

Something like this:

const lazyFlip = {
  name: 'lazyFlip',
  enabled: true,
  requires: ['flip'],
  fn: ({ state }) => {
    instance.setOptions(opts => ({ ...opts, placement: state.placement }));
  }
}

const i = createPopper(a, b, {
  modifiers: [lazyFlip]
});

// [...]

i.update();