Skip to content

The template ref was not set to null correctly after the conditional rendering was updated #12898

Closed
@yinhangfeng

Description

@yinhangfeng

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ustu2zAQ/JUtD5EMCDJStxfXCdAWObRAH0h9q4KAkFYyE4oUSEpxYOjfs6QkWwmSXGxxZ2Z39nFgX5sm7Vpka7axuRGNA4uubS4zJepGGwcH2CVgsExAq1+6VQ6LBAoshcLvmigKlUtA4d5tRX4PPZRG1xBRzihTmcq1sg62SD8XL2XxIVMw1IsXEB4Ag6CUvCIB1Y2daXHxZQ6ixJrk11iOFA8PhKPHmNtHlQPlvbicUkNIm3ZctkjKkkuLY2IA/sCFO/YRUg6Ar6klplJX8anykGVi9ScHhtox6mXhMfp/ej+zcnYGuzgqRBclNG5qaD1vsU/AY+fRIjmpP7wlH9kfZ+ybyWT47yke7G6Ww8Jp1fRwWDeSO6QXwCbsa0nfm+UMYAlzlsZRiiq9s1rR0YQGM5bTSoVE86dxgsaVsfXUesa4lPrhZ4j5VY62SLPD/P6V+J3d+1jG/hq0aDrM2BFz3FToBvjq329a1gysddFKYr8DXiOtsvUeB9q3VhVke8YLbn+E0xeq2tqrvUNlp6a80WmInk1X7q/5rdZPdlfpp6Cj2dMUbzs0PicNcJV+Ts9XrH8CvcIf9Q==

Steps to reproduce

<script setup>
import { h, ref, onMounted, defineComponent, nextTick } from 'vue'

const Test = defineComponent({
  setup() {
    const flag = ref(true);
    const elementRef = ref();

    onMounted(async () => {
      flag.value = false;
      await nextTick();
      console.log(elementRef.value);
    });

    return () => {
      return [
        flag.value && h('div', { ref: elementRef }, 'div1'),
        !flag.value && h('div', {}, 'div2'),
      ];
    };
  },
});
</script>

<template>
  <Test />
</template>

What is expected?

The final value of elementRef is null

What is actually happening?

The final value of elementRef is div2

System Info

System:
    OS: macOS 14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.62 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.15.5 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.55
    Edge: 133.0.3065.69
    Safari: 17.6

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions