alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
27.92k stars 1.22k forks source link

Fix error: TypeError: i is not a function #4204

Closed fredden closed 4 months ago

fredden commented 4 months ago

There is a race condition in Alpine when using x-transition and x-show. It's tricky to reproduce. The code change here removes the JavaScript error: Uncaught (in promise) TypeError: i is not a function.

Normally, el._x_hidePromise is a Promise, so calling this is fine. However, when this code runs more than once in quick succession, one copy works just fine, and the next copy passes an undefined into the Promise.all(), so the .then() gets an undefined, which it then attempts to call as a function, resulting in the error reported.

The scenario that I've been looking into is a drop-down menu layout where putting my mouse over a top-level element reveals a sub menu. When I move my pointer over these top-level elements slowly, all is well. When I move my pointer over these top-level elements quickly, all is well. When I move my pointer back-and-forth over these top-level elements quickly, I can trigger this bug.

With the code changes in this pull request applied, I am no longer able to reproduce the bug with these same steps. As far as I can tell, this fixes https://github.com/alpinejs/alpine/discussions/1672 and fixes https://github.com/alpinejs/alpine/discussions/3832#discussioncomment-7413593.

calebporzio commented 4 months ago

Thanks!!