Rename symbol on a HTML tag inside of JSX globally renames all tags

[egamma]

From @xirzec on March 9, 2016 22:24

1. Open a project that uses TypeScript + JSX (with react.d.ts loaded)
2. Put the cursor over a common HTML tag like <div>
3. Hit F2 to rename symbol
4. Rename the div to something else (like span)

Expected: Just the matching open/close is renamed to <span>
Actual: Every div in every JSX file is now a span and even react.d.ts has had its div attribute in the HTML tag names renamed to span

VS Code version: 0.10.10

Copied from original issue: microsoft/vscode#3937

[billti]

This is entirely by design. The element name in a JSX expression is class/interface/function name, and renaming it renames all references to that class/interface/function, just as it would for any other symbol.

If the expectation is that we would only update the open/close tag, then that is a new feature, and not the current rename operation.

[RyanCavanaugh]

At a minimum we should block the operation when the tag name is sourced in IntrinsicElements

[mhegazy]

I think we need a general approach here. may not change anything "outside" your project. for instance any symbol from a .d.ts from a node package, or a @typings folder.

[xirzec]

Yeah this is a hard problem, I think the expected behavior is a simple tag rename in the JSX markup, but that's only because of how easy it is to fall into expecting HTML language service semantics out of a JSX file.

The reason this was particularly painful in VS Code is that it edits a ton of files with a bad change and Edit -> Undo only reverted it in the currently opened document, leaving it up to the user to manually revert many unexpected edits (hope you committed your changes recently.)

[Jack-Works]

is this fixed by #28066?

[GMaiolo]

Is there news about this or a workaround?

[WilsonNet]

I just discovered this bug today in the worst way possible.