bug: vue, elements not shown at the moment did enter lifecycle is fired

[honghuangdc]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

create a reference in dom, which is inside Icon-vue component, then get the config "offsetHeight", "offsetWidth", "clientHeight", "clientWidth" of the dom in lifecycle onMouted, but their value are all zero, and when I add setTimeout function to get config, it will get real value.

Expected Behavior

it can get the real value of config "offsetHeight", "offsetWidth", "clientHeight", "clientWidth" of the dom reference in lifecycle onMouted.

Steps to Reproduce

1. set dom reference inside ionic-vue component
2. in lifecycle onMouted, get the config "offsetHeight", "offsetWidth", "clientHeight", "clientWidth" value

here is the code:

<template>
  <ion-page>
    <div ref="domRef">dom test</div>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { IonPage } from '@ionic/vue';

export default defineComponent({
  name: 'App',
  components: {
    IonPage
  },
  setup() {
    const domRef = ref<HTMLElement | null>(null)

    onMounted(() => {
      console.log(domRef.value) // it can get dom reference
      console.log(domRef.value?.offsetHeight) // but the value is zero
      console.log(domRef.value?.offsetWidth)
      console.log(domRef.value?.clientHeight)
      console.log(domRef.value?.clientWidth)
    })

    return {
      domRef
    }
  }
});
</script>
<style scoped></style>

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

Hello @honghuangdc thank for the issue!

Excuse my lack of familiarity with Vue, but I don't believe onMounted is guaranteed to execute after the view has completed rendering. The DOM reference values you are accessing won't be populated until the element has completed reflow & repaint.

Looking at the Vue docs, they recommend using $nextTick in onMounted when needing to run code after render: https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted

this.$nextTick(function () {
  // Code that will run only after the
  // entire view has been rendered
})

Can you let me know if this resolves your issue or if I am incorrect in my understanding of your issue? Thanks!

[honghuangdc]

thanks your reply.if add nextTick function in lifecycle onMouted, it still has the same problem. It has nothing to do with vue, because there is no such problem in a vue project without ionic-vue.
for example, create a dom reference which is the child element of body, but outside the ionic-vue component, those config values can be normally getted in lifecycle onMouted.

[honghuangdc]

this problem bothers me so long, because some vue plugins which need dom reference to get those config values won’t run normally

[sean-perkins]

Hello @honghuangdc thanks for your patience. Followed up with Liam to understand more about this issue.

In your example, since you are attaching to a div, you will need to use the onIonViewDidEnter lifecycle hook. The hook is fired at the same time the element is shown, so you will need to wait a frame for the browser to re-render the contents.

Let me know if that information helps or if you have additional questions. Thanks!

[honghuangdc]

oh,when I met this problem, I already tried in this way, it still had the same problem.