$nextTick does not wait for the DOM update on Safari

[aldovincenti]

Context
Given a hidden input that is displayed after a button click, the input must immediately be set to focus, as soon as the button is clicked and the input is displayed. Since an element must be displayed to be set to focus, it is necessary to wait until the DOM is updated and the element is displayed. In this case, it should be possible to use $nextTick to meet the above requirements. It works on Chrome and Firefox (latest versions), but not on Safari. Using a setTimeout to wait for the DOM update works.

Browser: Safari 15.4
OS: macOS 12.3.1
Alpine version: 3.10.1
Code to reproduce the bug: https://jsfiddle.net/mortu9f2/

[CraftLogan]

I created a forceNextTick alpine magic helper function for this:

Try this create a $forceNextTick.js file.
Containing the the code below:

const doubleRequestAnimationFrame = (callback) => {
    requestAnimationFrame(() => {
        requestAnimationFrame(callback)
    })
}

export function $forceNextTick(callback = () => {}) {
    if (callback && typeof callback === 'function') {
        doubleRequestAnimationFrame(callback)
    } else {
        return new Promise(resolve => {
        doubleRequestAnimationFrame(resolve)
        })
    }
}

Import it into your app.js file
import { $forceNextTick } from "./magics/$forceNextTick.js";

Then add this to your app.js file.
Alpine.magic('forceNextTick', () => $forceNextTick)

You can read more about the issue here: vuejs/vue#9200

[stepanjakl]

Thanks a lot @CraftLogan, this is super helpful! I'll be using this one instead of the regular $nextTick() function from now on.

[CraftLogan]

No problem! Enjoy...

[rastographics]

I needed this for the focus to be set on a freshly-visible element, except for me it wasn't working in Chrome either.
$forceNextTick made it work!

[ludwig-gramberg]

It's not just Safari though and I wish we could solve this within Alpine to be a stable behavior?
#4580