[BUG] Custom HTML tag loses end angle bracket on delete

[rickmacgillis]

• VSCode Version: 1.41.1
• OS Version: Linux Mint 19.3

Steps to Reproduce:

1. Create an HTML file with the following custom HTML tag in it. (I pulled this one from my Angular project, but this bug is not Angular specific. Please note that I only see that custom HTML components are affected by this bug.) Code: <app-server-element *ngFor="let serverElement of serverElements"></app-server-element>
2. While the bug happens without any attributes on it, it makes it easier to see with having at least one attribute on it. Be sure to keep it in place.
3. Position your cursor directly after <app-server-element and you should see VS Code highlight all of the angle brackets for that tag.
4. Press "delete" on your keyboard. (Backspace DOES NOT trigger the bug!)
5. You'll see that it deletes the space next to your cursor position, but it also has an off-by-one bug that removes the ending angle bracket at the very end of the completed tag. The end result will be: <app-server-element*ngFor="let serverElement of serverElements"></app-server-element <-- Notice the lack of an angle bracket here.

The reason why this bug is so important is that when I refactor long lines of HTML code, I usually start by deleting the space after the tag name, then I hit enter to move the attribute to a new line. I repeat that process for each attribute. I often get browser errors because the ending angle bracket gets removed, and I have to manually add it back.

Does this issue occur when all extensions are disabled?: Yes

EDIT:
Just a quick follow up on this topic: there's also a related bug that I want to address. It also relates to improper parsing of a custom HTML tag. When you go to add an attribute to the custom HTML element, it adds the attribute inside of the end tag as well.

To reproduce:

1. In a blank HTML document, type: <app-odd></app-odd>.
2. Now, position your cursor after the opening tag such that you can add an element. You MUST paste it in, including the preceding space, as typing it in manually will not trigger the bug!
3. Add an attribute such as the following: <app-odd [number]="incrementTick"></app-odd>
4. Instead of seeing the attribute get added like the one in step 3, it'll show up as <app-odd [number]="incrementTick"></app-odd [number]="incrementTick">

EDIT 2:
This issue is also present when pasting in an attribute on a NON-custom HTML element. For example, the creation of <p *ngSwitchCase="10">Value is 10</p *ngSwitchCase="10">

[octref]

Duplicate of #87067. Sorry about that.
You can now either press ESC before running paste, or turn it off by html.mirrorCursorOnMatchingTag.

[rickmacgillis]

@octref Cool. I'm glad my edit stuff is already getting discussed in another thread, the original issue isn't getting discussed there. If I remove the edit sections from my OP, will you reopen this issue and remove the "duplicate" tag?

[octref]

@rickmacgillis That's the expected behavior of multiple cursors. You have two cursors. Pressing delete would delete a character after each cursor.
If you don't like VS Code adding a cursor for you, you can turn this feature off.

[rickmacgillis]

@octref So that's the intended behavior?

[octref]

This is consistent with all multi-cursor actions:

With the current implementation, fixing this will only add more "magic" to the whole mirror cursor, and makes it less understandable. You can follow #88424, which would eliminate this problem once implemented.

I can't make the editor delete only one character when two cursors are present. Other people will be unhappy.

[rickmacgillis]

@octref It doesn't matter to me who's name is attached to the ticket that got it fixed. I'm only interested in having it fixed. So, if your ticket stops the bug (yes, it's a bug) then I'm happy with it.