onMounted is being called prior to FormKit being ready on page transitions

[JohnCampionJr]

Reproduction

https://github.com/JohnCampionJr/nuxt3-net6-starter/tree/wip

Describe the bug

Setting up a test / starter nuxt3 app for my use.

Trying out the auto prop plugin and I'm finding a problem in the onMounted() lifecycle hook.

It appears that the FormKit has not always updated the DOM by the time this event fires, so on back to back pages with similarly named inputs, the onmounted is not catching the right element.

You can see it in my repo (no need for dot net backend) just start it up and click between the two validation pages and watch the console. It's not grabbing the right element.

I've tried nextTick and setTimeout, with no luck. I've also disabled the plugin for testing.

Environment

• OS: Windows
• Browser Edge, Chrome
• Version latest

[JohnCampionJr]

It's definitely a case of FormKit not being fully updated before onMounted. Even if I take everything out, and give everything unique names and IDs, the onMounted seems to be returning elements from the previously loaded page.

So, maybe a different question, is there a better event to call focus() in to ensure that the FormKit form is ready?

[justin-schroeder]

onMounted should work just fine, we use that pretty frequently. I checked out the reproduction but I'm unable to get it to boot up — could you make a minimum repro on stackblitz or a vanilla nuxt3?

[JohnCampionJr]

Strange. Let me see if I can narrow it down.

[JohnCampionJr]

Here you go. View console. You'll see the element being found in onMounted is not the one rendered.

https://stackblitz.com/edit/github-vqvsuh-bnkwij?file=pages/second.vue

This one is the same thing but with completely unique ids and names to confirm its not that.
https://stackblitz.com/edit/github-vqvsuh-bq7rdg?file=pages/second.vue

[justin-schroeder]

Thanks for those repros. So it looks like Nuxt wraps its pages in a <Transition> by default, so onMounted is not a reliable way to know when a page actually mounts to the DOM. This is not FormKit specific (for example, here is the same but with a raw <input>), but I do wonder what their recommendation would be on the best way to ensure a given DOM node is mounted or not.

If you want to disable this default <Transition> behavior, you can add definePageMeta({ pageTransition: false }) to your pages and that will prevent these kind of issues: https://stackblitz.com/edit/github-vqvsuh-bsbmjr?file=pages%2Fsecond.vue

If you find an alternate workaround I'd be interested.

[JohnCampionJr]

Thank you! Found the upstream bugs:
Nuxt:
nuxt/nuxt#13471

Vue3 Bug:
vuejs/core#5844

For anybody else struggling with this, you can either disable transitions or wrap all the code that needs to read the DOM in onMounted in a setTimeout (until the upstream bug is fixed):

onMounted(() => {
  setTimeout(() => {
    const x = document.getElementById('email');
    x.focus();
  }, 100);
});