x-show + async function race condition

[hlindset]

When updating a value in an async function, with a promise that resolves immediately/quickly, there seems to be a race condition where the x-show show/hide DOM operations are executed out of order (?)

Example here: https://codesandbox.io/s/blissful-gwen-4rpdt?file=/index.html

• "immediate" and "no timeout" always fails for me
• "timeout 0" fails sometimes for me, but very rarely

[danddanddand]

I played with this a bit (https://codepen.io/danddanddand/pen/OJjbVRy) and it does seem to be happening too fast for the conditions of x-show to mutate dom correctly. Obviously adding this.show = false; into a $nextTick(()=>{this.show = false;}) is the easy way to avoid this race condition. Not sure if this is intended behaviour to avoid "blips" where things appear/disappear too quickly or if it could be considered bug?

[SimoTod]

I think it's due to the fact that x-show waits a frame when showing so it's compatible with click.away. Combined with await, which pauses the current function (even if the promises is already resolved) to run any other pending operations, it makes alpine enqueue the show operation then the hiding one is ignored because the div is already hidden and finally it will show the div on the next tick even if the boolean says the opposite.