Class completion destroys trailing markup

[AnrDaemon]

Type: Bug

Completing classes from Bootstrap will remove following markup. An example:

<div class="col-a|"><a href=""></a></div>

->

<div class="col-auto href=""></a></div>

There's clearly a race involved, because if you wait for dropdown to appear, completely form and only then pick your choice, there's a chance it won't destroy markup, but the more class names are already in the attribute, the less are the chances it will not break.

Extension version: 2.0.6
VS Code version: Code 1.85.1 (0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2, 2023-12-13T09:49:37.021Z)
OS version: Windows_NT x64 10.0.19045
Modes:

System Info

Item	Value
CPUs	Intel(R) Core(TM) i3-8145U CPU @ 2.10GHz (4 x 2304)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	7.86GB (0.64GB free)
Process Argv	--folder-uri file:///d%3A/Profiles/user/Documents/project
Screen Reader	no
VM	0%

[ecmel]

Hello, is this snippet in .html file? Can you share the whole file? I could not reproduce using the snippet.

[AnrDaemon]

I'll try to produce a complete repo example once I get a lil' of free time.

[AnrDaemon]

Extension version: 2.0.7
VS Code version: Code 1.85.2 (8b3775030ed1a69b13e4f4c628c612102e30a681, 2024-01-18T06:40:10.514Z)
OS version: Windows_NT x64 10.0.19045
Modes:

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-3550 CPU @ 3.30GHz (4 x 3303)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	15.96GB (8.95GB free)
Process Argv	C:/Users/anrdaemon/Documents/Bugs/VS Code/vscode-html-css#278
Screen Reader	no
VM	0%

2024-01-27_22-01-05.mp4

vscode-html-css#278.tar.gz

[ecmel]

I noticed

"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"

in your settings.json. Can you try again but deleting that line in the settings? And please use the latest version of the extension.

[ecmel]

It happens more frequently when I start vs code. Happens without this extension as well. Upstream issue microsoft/vscode#198793

Screen.Recording.2024-01-28.at.15.08.53.mov

[AnrDaemon]

I've installed it right before testing. Though it was latest.

Thanks for pointer, I was unable to reproduce it without extensions.

[AnrDaemon]

I noticed

"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"

in your settings.json. Can you try again but deleting that line in the settings? And please use the latest version of the extension.

The difference between this and default setting is absence of "$". When working with PHP, "$" is part of a word. So the setting.

[fourclever]

Steps to Reproduce:

When you have a <div class=""></div> and you begin typing a classname and select a suggested class (e.g. "test"), the ending " of the class attribute will get omitted. The tag then looks like this: <div class="test></div>.

In my case, the problem always occurs when using the "HTML CSS Support" extension.

• VS Code Version: 1.87.0
• OS Version: Linux x64 6.7.8

[AnrDaemon]

Some extensions just make the race more apparent. The issue is reproducible with stock VS Code without any extra extensions. Although not as easily.