`autoUpdate` calls `updatePosition` continuously when the floating element is clipped by a parent with overflow hidden. about floating-ui HOT 4 CLOSED

We might be able to do something with the detectOverflow middleware - is there anyway to disable the layoutShift option on the fly?

Hmm interesting, I think using hide() can work indeed, by checking referenceHidden and calling cleanup() and setting it up again with new options.

Something like this may work:

let cleanup = autoUpdate(ref, float, update);
let previousReferenceHidden = false;

function update() {
  computePosition(ref, float, { 
    middleware: [hide()] 
  }).then(data => {
    const isHidden = data.middlewareData.hide?.referenceHidden;
    if (isHidden && !previousReferenceHidden) {
      cleanup();
      cleanup = autoUpdate(ref, float, update, {layoutShift: false});
    } else if (!isHidden && previousReferenceHidden) {
      cleanup();
      cleanup = autoUpdate(ref, float, update);
    }
    previousReferenceHidden = isHidden;
  });
}

What's probably better than this though is using that variable to unmount and clean up the floating element entirely? When it opens again, re-mount it.

from floating-ui.

I'm aware of this loop, and internally the updates are throttled to 1 update per 100ms as you see.

I didn't manage to find a way to fix it (there may be), but regardless of it, I didn't consider it to be a major issue once I throttled it, because the updates are still slower than those when scrolling, resizing, etc. In addition, it's also not common to have a floating element be mounted while clipped for extended periods, where the idle state having updates being called for a long period is a problem. No perf issues have been filed as an issue in the ~6 months since the feature was released.

The layoutShift: boolean option in autoUpdate can be set to false to prevent this from happening if absolutely necessary.

from floating-ui.

Yeah - our use case is certainly on the edge! We are injecting elements into existing sites, and need to account for when a elements parent is a collapse for example. I did play with layoutShift but we ideally want that on when the item is visible.

We might be able to do something with the detectOverflow middleware - is there anyway to disable the layoutShift option on the fly?

Ill keep playing and see what we can do.

from floating-ui.

Yeah - Like it. Agree with removing it - we are doing a lot of that already so that fits nicely with how the app works atm. Cheers for you help

from floating-ui.