Skip to content

Only run x-anchor's autoUpdate while the element is visible - #4936

Open
mfrost wants to merge 1 commit into
alpinejs:mainfrom
mfrost:anchor-lazy-autoupdate
Open

mfrost wants to merge 1 commit into
alpinejs:mainfrom
mfrost:anchor-lazy-autoupdate

Conversation

@mfrost

@mfrost mfrost commented Oct 21, 2026

Copy link
Copy Markdown

Per https://floating-ui.com/docs/autoupdate#usage:

It’s important that this function is only called/set-up when the
floating element is open on the screen, and cleaned up when it’s
removed. Otherwise, it can cause severe performance degradation,
especially with many floating elements being created.

This commit includes a mutation observer to watch for changes to the element to trigger Floating's autoUpdate(). We still attempt to start tracking the element on init in case it is visible to begin with.

An idempotent start() allows for more confident code without having to check the value of the release function to determine state. We now use a more obvious named flag for whether or not we're tracking the element
with autoUpdate().

Elements hidden by x-show, x-cloak, classes, etc. no longer keep scroll/resize listeners running.

NB: $anchor.x and $anchor.y now stay at 0 until the element is first shown. An element using x-show without x-cloak will briefly start tracking and then stop after Alpine init.

Per https://floating-ui.com/docs/autoupdate#usage:

> It’s important that this function is only called/set-up when the
> floating element is open on the screen, and cleaned up when it’s
> removed. Otherwise, it can cause severe performance degradation,
> especially with many floating elements being created.

This commit includes a mutation observer to watch for changes to the
element to trigger Floating's `autoUpdate()`. We still attempt to start
tracking the element on init in case it is visible to begin with.

An idempotent `start()` allows for more confident code without having to
check the value of the `release` function to determine state. We now use
a more obvious named flag for whether or not we're tracking the element
with `autoUpdate()`.

Elements hidden by x-show, x-cloak, classes, etc. no longer keep
scroll/resize listeners running.

**NB**: `$anchor.x` and `$anchor.y` now stay at 0 until the element is
first shown. An element using `x-show` without `x-cloak` will briefly
start tracking and then stop after Alpine init.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant