emmet.triggerExpansionOnTab enters visual mode

[cusxio]

Describe the bug

When emmet.triggerExpansionOnTab is triggered via TAB, the editor enters visual mode.

To Reproduce

1. Open a new .html file.
2. In insert mode, type div.
3. Press Tab.
4. The editor enters visual mode.

---

Expected behavior

The editor should remain in insert mode.

---

Screenshots

---

Environment (please complete the following information):

• Extension (VsCodeVim) version: 1.18.5
• VSCode version: 1.52.0
• OS: macOS Catalina

---

Additional context

Related to: #5474

The PR referenced in the issue above did not fix the issue.

[berknam]

I can't reproduce this on Windows 10. Can you show what happens when you do that with Vim disabled? Do you have any remaps in "vim.insertModeKeybindings" for the emmet trigger expansion command?

[cusxio]

Can you show what happens when you do that with Vim disabled?

Do you have any remaps in "vim.insertModeKeybindings" for the emmet trigger expansion command?

No I don't.

The only settings enabled are

{
    "emmet.showExpandedAbbreviation": "never",
    "emmet.triggerExpansionOnTab": true
}

I've disabled all extension and only enabled the vim extension and those settings. Note that the editor enters visual mode when Tab is pressed.

Side Note

I noticed another thing, if you enable emmet.showExpandedAbbreviation, then pressing Tab works as expected for known HTML elements, but unknown element element, where the suggestion is not shown, then vim enters visual mode.

[evolify]

The same issue

[berknam]

@cusxio @evolify Are you using the Insiders version?

[berknam]

I am able to reproduce this on the Insiders version. I'm also able to reproduce this on normal version but only if using the commandId emmet.expandAbbreviation instead of the one that is bound to TAB by default that is editor.emmet.action.expandAbbreviation.

From what I can tell, this commit is the one that reintroduces the issue on the Insiders version by reverting the previous commit.

There has been an update on the emmet extension which added the two expand commands, the old emmet.expandAbbreviation that has the issue and the new editor.emmet.action.expandAbbreviation that works fine.

The emmet.expandAbbreviation command seems to be selecting the word before removing it and inserting the snippet. That selection change makes Vim go to Visual mode.

@rzhao271 Hey! Sorry to bother. But can you help out here with this?

[cusxio]

@berknam

I personally can reproduce it on both Insiders and non-Insiders version. And am sure that the expansion occurs via editor.emmet.action.expandAbbreviation

Btw, per #5495, I downgraded to 1.6 and the issue no longer persist.

So I suspect there should be a commit between 1.6 and 1.7 that causes this.

v1.16.0...v1.17.0

[berknam]

So I suspect there should be a commit between 1.6 and 1.7 that causes this.

There was a change that makes it so that when vscode creates a selection Vim goes to visual mode.

But there has been a change in emmet as well that is creating a selection before expanding the abbreviation and that is what is causing the issue.

For me on windows 10, vscode 1.52.1 and Vim 1.18.5 with emmet settings by default if I type div and then press TAB it expands to <div>|</div> and keeps me on InsertMode.

If I enable emmet.triggerExpansionOnTab the same thing happens. If I set emmet.showExpandedAbbreviation to never then I can't get the abbreviation to expand at all using TAB even if emmet.triggerExpansionOnTab is enabled. The only way I can get it to expand is to either call the Emmet: Expand Abbreviation from command palette or by using a keybinding to the emmet.expandAbbreviation command or even by using a remap or a keybinding to editor.emmet.action.expandAbbreviation. And in all these cases I can see that a selection of the word div is being made and only after it will it expand the abbreviation, this is what causes the issue.

For some reason the default TAB keybinding to editor.emmet.action.expandAbbreviation doesn't work when emmet.showExpandedAbbreviation is set to never. But when it is set to always the default TAB keybinding to editor.emmet.action.expandAbbreviation works differently from a user keybinding or remap to that same command by not creating that selection first. (this is weird 😕 )

@cusxio Can you please check you "Keyboard Shortcuts" and search for emmet expand and post a printscreen of that? Is the default TAB keybinding set to editor.emmet.action.expandAbbreviation? Does it show the source as 'Default' or 'User'?

[cusxio]

If I enable emmet.triggerExpansionOnTab the same thing happens. If I set emmet.showExpandedAbbreviation to never then I can't get the abbreviation to expand at all using TAB even if emmet.triggerExpansionOnTab is enabled. The only way I can get it to expand is to either call the Emmet: Expand Abbreviation from command palette or by using a keybinding to the emmet.expandAbbreviation command or even by using a remap or a keybinding to editor.emmet.action.expandAbbreviation. And in all these cases I can see that a selection of the word div is being made and only after it will it expand the abbreviation, this is what causes the issue.

Your debugging result seems consistent with mine.

When emmet.showExpandedAbbreviation: never, the "suggestion" box never appears, and because it never appears, there's no way to expand the abbreviation unless you call Emmet: Expand Abbreviation (i.e. through the command palette).

---

@cusxio Can you please check you "Keyboard Shortcuts" and search for emmet expand and post a printscreen of that? Is the default TAB keybinding set to editor.emmet.action.expandAbbreviation? Does it show the source as 'Default' or 'User'?

It's the default.

---

For some reason the default TAB keybinding to editor.emmet.action.expandAbbreviation doesn't work when emmet.showExpandedAbbreviation is set to never. But when it is set to always the default TAB keybinding to editor.emmet.action.expandAbbreviation works differently from a user keybinding or remap to that same command by not creating that selection first. (this is weird 😕 )

I think there's a subtle but important difference here.

1. The default editor.emmet.action.expandAbbreviation shortcut requires emmet.triggerExpansionOnTab: true (as seen in the image above). Without it, it will not work.

2. emmet.showExpandedAbbreviation: never will disable the "suggestion" box.

---

TLDR:

I think there's 2 ways to trigger emmet expand abbreviation.

1. Triggering via the suggestion box, works as intended (does not enter Visual Mode).

2. Triggering via calling editor.emmet.action.expandAbbreviation is broken (enters Visual Mode).

[rzhao271]

Hi, the two commands currently work as follows:

• emmet.expandAbbreviation is a command within the Emmet extension
• editor.emmet.action.expandAbbreviation is a command (within the VS Code core for now) that does some preprocessing before calling emmet.expandAbbreviation.

Therefore, editor.emmet.action.expandAbbreviation is the command that should be called by the tab key press. That command should also be the one called by the suggestion box/command palette by default.

[rzhao271]

@berknam

Both methods of expansion go into visual mode for me now.
Is there an easy way to make the extension go back into insert mode, such as by providing a new empty selection after the expansion?

Otherwise, we have the following issues:

• Expand abbreviation selects the abbreviation to replace it with the expanded text
• Wrap with Abbreviation selects the text to then wrap around it with some expanded abbreviation

I'm not sure how these operations should be handled without changing the selected text.

[notiv-nt]

@berknam i've found, the error does not apply to emmet

This commit causes the problem 35d06e6 (Jul 25)

bug.mov

1 commit before: 94b3c68 (Jul 24):

ok.mov

Vim/src/mode/modeHandler.ts

Line 213 in 35d06e6

await this.setCurrentMode(Mode.Visual);

this line to be specific

[evolify]

any progress now ?

[mrmurphy]

This is still an issue in 1.21.1 in case anyone was wondering. Thanks for your work! <3

[devstefancho]

I still have the same issue, and it's really bothersome.
How do you guys use emmet with this issue, what is the better way to this issue, currently?
any solution?

[notiv-nt]

@devstefancho I switched to amVim, but you can fork and comment this line

Vim/src/mode/modeHandler.ts

Line 181 in 35d06e6

await this.setCurrentMode(Mode.Visual);

[rehack]

How to fix it

[devstefancho]

@rehack Cool!, I install another version(1.16.0) and The problem is gone like magic.

This is How to switch to another version

[orlandoxu]

This is still an issue in v1.21.6 in case anyone was wondering. Thanks for your work!

[Innei]

Is there any progress now?

[evolify]

Nothing update, I have go back to neovim.

[macintacos]

Perhaps this just needs to be reassigned? @berknam seems to not be very active anymore. Considering that we've identified the commit that caused this issue in this comment, perhaps the fix is straightforward? As far as I can tell this is still an issue in the latest version of the extension.

@J-Fields any chance this could get re-prioritized? The label seems to suggest that this is an upstream issue, but it seems doubtful if there are version of the Vim extension that work and ones that do not.

[djgray780]

It might be worth a try, but I have the following Emmet settings right now and I can use the abbreviations without getting shoved into visual mode. I had the same problem as everyone else until I added the emmet.includeLanguages setting.

//* Emmet Settings *//
"emmet.triggerExpansionOnTab": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

[rehack]

您好！您的邮件已经收到，我会及时回复您，感谢您对睿客网的支持。需了解更多高质量的web开发技术请移步：http://www.rehack.cn/ 

[rtalexk]

I had faced the same issue (with erb files).
After doing some research to configure VSCode for Rails, I've fixed this issue by doing:

• Install the Ruby extension.
• Add "erb": "html" to the emmet.includeLanguages array setting.

Here's my full settings file in case you wanna replicate it:

{
    "editor.fontSize": 16,
    "workbench.colorTheme": "Cobalt2",
    "editor.bracketPairColorization.enabled": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "editor.guides.bracketPairs": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
    "editor.tabSize": 2,
    "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.copyWithSyntaxHighlighting": false,
    "emmet.includeLanguages": {
        "erb": "html",
        "html": "html",
        "html.erb": "html",
        "ruby": "html",
        "html.inky": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showExpandedAbbreviation": "always",
    "workbench.iconTheme": "vscode-great-icons",
    "auto-close-tag.fullMode": true,
    "editor.minimap.enabled": false,
    "files.associations": {
        "*.erb": "erb",
        "Gemfile": "ruby"
    }
}

And the extensions I have installed:

* Most of them are not related to the issue, but may be worth mention it.

[pingshunhuangalex]

Can confirm this is still an issue in Vim (v1.22.2):

Version: 1.68.0-insider (user setup)
Commit: c23f0305dbf82b2319b198f4dbf3c5d5bc522f15
Date: 2022-05-16T05:17:17.823Z
Electron: 17.4.3
Chromium: 98.0.4758.141
Node.js: 16.13.0
V8: 9.8.177.13-electron.0
OS: Windows_NT x64 10.0.19044

---

As mentioned in the comment above, I had the same settings but was not able to get it to work.

[mrwest808]

I'm experimenting with this issue right now (locally in my settings), and I've noticed that this abomination of a custom keybinding actually seems to produce the desired effect.

I simply tried recreating the steps I usually do manually to counteract this issue (<Esc> to exit visual mode followed by c i t to enter input mode inside of the newly created tag).

"vim.insertModeKeyBindingsNonRecursive": [
  {
    "before": ["<C-e>"],
    "after": [],
    "commands": [
      {
        "command": "editor.emmet.action.expandAbbreviation",
        "args": []
      },
      {
        "command": "extension.vim_escape",
        "args": []
      },
      {
        "command": "extension.vim_insert",
        "args": []
      },
      {
        "command": "extension.vim_right",
        "args": []
      },
      {
        "command": "extension.vim_right",
        "args": []
      },
      {
        "command": "extension.vim_right",
        "args": []
      }
    ]
  }
]

[tiborsimon]

This issue is still relevant. I modified a bit @mrwest808 solution to be able to handle more scenarios with a simple repeated keystroke:

{
  "vim.insertModeKeyBindingsNonRecursive": [
    {
      "before": ["<C-m>"],
      "after": [],
      "commands": [
        {
          "command": "editor.emmet.action.expandAbbreviation",
          "args": []
        },
        {
          "command": "extension.vim_escape",
          "args": []
        }
      ]
    },
    ...
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<C-m>"],
      "after": ["f", "/", "h", "i"]
    },
    ...
  ],
  ...
}

It will map the C-m key combination (C-m is more ergonomic for me) in both insert mode and in normal mode:

1. The mapping in insert mode triggers emmet and exits to vim normal mode.
2. The mapping in normal mode would navigate to the most-inner tag that is generated and enters to insert mode again.

You just have to press C-m twice, and you are golden 👯

I cannot found a solution to do it with one mapping as vscodevim doesn't support the :normal command yet, and I don't want to bother with integrating the external nvim to VSCode yet.

With this double mapping you can have more complex emmet expansions:

# The @ character is the cursor position

p.subtitle@
[C-m][C-m]
<p class="subtitle">@</p>

a>span.icon.github@
[C-m][C-m]
<a href=""><span class="icon github">@</span></a>

[evolify]

Any update?