Skip to content

When completing HTML tags within a template tag in Neovim, text gets overwritten in unexpected areas. #5331

Closed
@tadashi-aikawa

Description

@tadashi-aikawa

Vue - Official extension or vue-tsc version

2.2.8

VSCode version

1.99.3

Vue version

3.5.13

TypeScript version

5.8.3

System Info

System: OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat) CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H Memory: 10.34 GB / 15.43 GB Container: Yes Shell: 5.9 - /bin/zsh Binaries: Node: 22.8.0 - ~/.local/share/mise/installs/node/22.8.0/bin/node Yarn: 1.22.22 - ~/.local/share/mise/installs/node/22.8.0/bin/yarn npm: 10.8.2 - ~/.local/share/mise/installs/node/22.8.0/bin/npm bun: 1.2.9 - ~/.local/share/mise/installs/bun/1.2.9/bin/bun Browsers: Chrome: 132.0.6834.83

package.json dependencies

{ "dependencies": { "vue": "^3.5.13" }, "devDependencies": { "@tsconfig/node22": "^22.0.1", "@types/node": "^22.14.0", "@vitejs/plugin-vue": "^5.2.3", "@vue/tsconfig": "^0.7.0", "npm-run-all2": "^7.0.2", "typescript": "~5.8.0", "vite": "^6.2.4", "vite-plugin-vue-devtools": "^7.7.2", "vue-tsc": "^2.2.8" } }

Steps to reproduce

Create a vue project.

bun create vue@latest vue-sandbox # select "TypeScript" only cd vue-sandbox bun i

Open and edit src/App.vue in Neovim.

<script setup lang="ts"> </script> <template> <h1>title</h1> </template> 

When type <div and display suggestions.

<script setup lang="ts"> </script> <template> <div <h1>title</h1> </template> 

Image

Then select/confirm one of the suggestions div.

What is expected?

<script setup lang="ts"> </script> <template> <div <h1>title</h1> </template> 

What is actually happening?

<script setup lang="ts"> </script> <template> <div1>title</h1> </template> 
2025-04-20_14h01_21.mp4

Link to minimal reproduction

No response

Any additional comments?

I didn't experience this issue when using the "Vue - Official" extension in VSCode, and the problem doesn't occur in Vue files that don't have a <script> tag.

While using Neovim with plugins like nvim-lspconfig and blink.cmp for LSP and completion support, I checked the LSP debug logs and found the following output from the Volar LSP:

[DEBUG][2025-04-20 13:17:41] ...m/lsp/client.lua:677	"LSP[volar]"	"client.request"	2	"completionItem/resolve"	{ documentation = { kind = "markdown", value = "The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/HTML/Element/div)" }, exact = false, insertTextFormat = 1, kind = 10, label = "div", score = 20, sortText = "\1div", textEdit = { newText = "div", range = { ["end"] = { character = 5, line = 7 }, start = { character = 3, line = 6 } } } }	<function 1>	12 

Looking at this log, I can see that range.start and range.end are pointing to different lines. Since this issue doesn't occur with other LSPs, I suspect this might be specific to the Volar LSP implementation.

The code that generated this log output can be found in the Neovim repository here:
https://github.com/neovim/neovim/blob/4b909528516032b002a4a32f3e06f0eb6185ea6b/runtime/lua/vim/lsp/client.lua?plain=1#L678

This is my first time investigating LSP logs and troubleshooting this kind of issue, so please let me know if I've missed anything or if my comments aren't relevant :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions