autoUpdate

This function adds listeners that automatically update the position of the floating element when required.

Only call this when the floating element is mounted to the DOM (or visible on the screen).

import {computePosition, autoUpdate} from '@floating-ui/dom';
 
async function update() {
  const {x, y} = await computePosition(referenceEl, floatingEl);
}
 
const cleanup = autoUpdate(referenceEl, floatingEl, update);

It returns a cleanup function that should be invoked when the floating element is no longer mounted on the DOM (or visible on the screen).

It does not call update() immediately, so for the first update, you should call the update function yourself.

By default, this requires a ResizeObserver. To support old browsers, either polyfill this constructor, or disable the elementResize option and update manually.

Options

These are the options you can pass as a fourth argument to autoUpdate().

interface Options {
  ancestorScroll?: boolean;
  ancestorResize?: boolean;
  elementResize?: boolean;
  animationFrame?: boolean;
}

ancestorScroll

default: true

Whether to update the position when an overflow ancestor is scrolled.

const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  ancestorScroll: false,
});

ancestorResize

default: true

Whether to update the position when an overflow ancestor is resized. This uses the resize event.

const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  ancestorResize: false,
});

elementResize

default: true

Whether to update the position when either the reference or floating elements resized. This uses a ResizeObserver.

const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  elementResize: false,
});

animationFrame

default: false

Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly.

Setting this to true disables every other listener as they become unnecessary.

const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  animationFrame: true,
});

This option should be used sparingly but can also automatically handle layout changes where the reference element moves on the screen, which none of the other options can handle.