Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useTemplateRef finds unrelated references with same name #5009

Open
ludwig801 opened this issue Nov 15, 2024 · 1 comment
Open

useTemplateRef finds unrelated references with same name #5009

ludwig801 opened this issue Nov 15, 2024 · 1 comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first 🔨 p3-minor-bug

Comments

@ludwig801
Copy link

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.2

Vue version

3.5.12

TypeScript version

5.6.3

System Info

No response

package.json dependencies

No response

Steps to reproduce

Assume the following 2 SFC components in the project:

Component A

<template>
  <div ref="name"></div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const name = useTemplateRef('name')
</script>

Component B

<template>
  <main ref="name"></main>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const name = useTemplateRef('name')
</script>

Notice that the elements have a ref with the value of "name".
There are 2 issues:

  1. When performing "Find All References" on any of the "name" string, the system finds both references, even tough they are unrelated but for the name of the ref (see image below).
    image

  2. This is actually the worst issue: when renaming one of the strings, the other also gets renamed in the <script setup>. In the image below, this is the result of renaming the ref inside ComponentB.vue. Both useTemplateRef in ComponentA.vue and ComponentB.vue have been renamed, and only ref="name" in ComponentB.vue has been renamed to "name2" (this one was actually expected and the only thing working as expected).
    image

What is expected?

When renaming a string ref inside an SFC file, only the refs inside that file get renamed.
The rest of the project should be untouched, as it is unrelated to this action.

What is actually happening?

Any useTemplateRef which references the same named string is renamed, throughout the project.
This is and incredibly dangerous and wild behaviour.

Link to minimal reproduction

No response

Any additional comments?

No response

@KazariEX KazariEX added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first 🔨 p3-minor-bug and removed pending triage labels Nov 15, 2024
@KazariEX
Copy link
Collaborator

Currently, this is a limitation of TS. (notice the occurrences highlighting)

image

I will commit a fix that allows renaming on ref="..." without affecting unrelated strings. However, please be careful not to rename useTemplateRef('...').

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first 🔨 p3-minor-bug
Projects
None yet
Development

No branches or pull requests

2 participants