`nextTick` with `x-show` sometimes fires too early, before DOM attibutes are updated. #4636

virtuallyunknown · 2025-06-21T14:15:53Z

virtuallyunknown
Jun 21, 2025

Greetings.

I've been struggling to figure out exactly why this is happening, but please consider the following example:

<body>
    <div class="container">
        <button x-data="tooltip" @focus="show" @blur="hide">
            <span>foo</span>
            <section x-show="open" x-ref="inner">inner</section>
        </button>
        <button x-data="tooltip" @focus="show" @blur="hide">
            <span>bar</span>
            <section x-show="open" x-ref="inner">inner</section>
        </button>
        <button x-data="tooltip" @focus="show" @blur="hide">
            <span>baz</span>
            <section x-show="open" x-ref="inner">inner</section>
        </button>
    </div>
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data("tooltip", () => ({
                open: false,
                show() {
                    this.open = true;
                    this.$nextTick(() => {
                        console.log(this.$refs.inner.style.display);
                        requestAnimationFrame(() => {
                            if (this.$refs.inner.style.display === "none") {
                                throw new Error("display is none");
                            }
                        });
                    });
                },
                hide() {
                    this.open = false;
                },
            }));
        });
    </script>
</body>

Here I have 3 <button>s, each one being a tooltip Alpine component (sorry if the terminology isn't quite right). When we focus them with the TAB key, we call the show method which switches the component state to true, which in turn toggles the visibility of their child <section>s.

Then inside the very same show method, we proceed to call nextTick in order to give Alpine time to make all the DOM updates, with the hopes that the style.display value of the <section> element will not be 'none' anymore.

This is a very simplified demo and I'm only logging the value of style.display for debugging purposes, but my real world usage involves calling getBoundingClientRect method on this element, and that will only work properly if the element is visible on the screen (not display: none).

The problem is that this doesn't work as expected, and on a seemingly random basis, I get to see that style.display is still none, even after the nextTick.

On Firefox, I am getting none logged almost 90% of the times, and the requestAnimationFrame test I've added never throws.

On Chrome, it's the opposite. I am getting empty string logged (expected behavior) most of the time, but occasionally requestAnimationFrame would throw.

Any advice on how to deal with this issue?

Thanks!

ekwoka · 2025-06-22T04:38:00Z

ekwoka
Jun 22, 2025

I'd suggest a different approach entirely, and use x-intersect to use the intersection observer to know when the element becomes visible, or alternatives do like x-transition does to tap into the show/hide transition logic to do what you're trying to do.

3 replies

virtuallyunknown Jun 22, 2025
Author

Hey, thanks for the response. I will look into these options you suggest, though the reason to post this question was to gain some understanding on what exactly is going on with nextTick here, since I never worked with Alpine before and I don't know if I might run into other issues later on.

But it almost seems to me that the docs are kind of contradicting what I'm observing:

$nextTick is a magic property that allows you to only execute a given expression AFTER Alpine has made its reactive DOM updates. This is useful for times you want to interact with the DOM state AFTER it's reflected any data updates you've made.

In the example above, my expectation was that the display property would be updated if we call it inside the nextTick, but the behavior is inconsistent, so I was just trying to figure out why.

ekwoka Jun 22, 2025

So, it just queues it to run at the start of the next frame. It's possible that, due to other factors, the other part of the update is also not happening until then.

virtuallyunknown Jun 22, 2025
Author

I think it would be great if the documentation goes into a little more depth on where $nextTick is useful and where it falls short. For example, it seems that it can't be relied upon if you need it for getBoundingClientRect or DOM attributes. Or maybe the problem is because it's used along x-show? I'm not sure.

The docs even go as far as comparing $nextTick to React's useEffect. By coincidence, I was trying to migrate from React where I was using useEffect and I wanted implement the same logic with Alpine. Personally I think this is kind of misleading.

Anyway, I don't mean to sound disrespectful or anything like that, just trying to provide my feedback.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

`nextTick` with `x-show` sometimes fires too early, before DOM attibutes are updated. #4636

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

nextTick with x-show sometimes fires too early, before DOM attibutes are updated. #4636

Uh oh!

virtuallyunknown Jun 21, 2025

Replies: 1 comment · 3 replies

Uh oh!

ekwoka Jun 22, 2025

Uh oh!

virtuallyunknown Jun 22, 2025 Author

Uh oh!

ekwoka Jun 22, 2025

Uh oh!

virtuallyunknown Jun 22, 2025 Author

`nextTick` with `x-show` sometimes fires too early, before DOM attibutes are updated. #4636

virtuallyunknown
Jun 21, 2025

Replies: 1 comment 3 replies

ekwoka
Jun 22, 2025

virtuallyunknown Jun 22, 2025
Author

virtuallyunknown Jun 22, 2025
Author