Vscode-ng-language-service: Event binding behavior very weird in VSCode

[doggy8088]

Describe the bug

Please watch this video I recorded.

https://youtu.be/QxY4O76Zl4A

To Reproduce

Steps to reproduce the behavior:

1. find a tag
2. add a (click)="" event binding
3. Unable to find right event when typing

Expected behavior

I expected to enter right event binding format.

Logs

N/A

Screenshots

https://youtu.be/QxY4O76Zl4A

Additional context

I'm using version 0.900.0. When I downgrade to version 0.802.3, the problem is gone.

[Sampath-Lokuge]

Yes, this is not working on the latest version v0.900.0.. I hope we'll have a fix soon. Thanks.

[ayazhafiz]

@doggy8088 @Sampath-Lokuge thank you for the report! My understanding of the bug report is that when you start typing an event binding inside a parentheses, you expect a completion for that event but do not get it:

<div (cli|) ></div>
         ^ expect "click" completion here

Is this correct?

[doggy8088]

@ayazhafiz Yes, that was the expected behavior.

[Sampath-Lokuge]

@ayazhafiz You can see the GIF here too: https://github.com/johnpapa/vscode-angular-snippets/issues/101#issuecomment-561738202

[iamcco]

It's weird, I use the same LSP and do not have this issue. don't know if it's vscode's issue

the LSP response the (click) item:

{
        "label": "(click)",
        "kind": 10,
        "detail": "attribute",
        "sortText": "click",
        "textEdit": {
            "range": {
                "start": {
                    "line": 13,
                    "character": 6
                },
                "end": {
                    "line": 13,
                    "character": 6
                }
            },
            "newText": "(click)"
        }
    }

[ayazhafiz]

The issue is that currently, there are two ways to complete a (click) binding:

<div cli|></div>
        ^ completing "(click)" will give
<div (click)></div>

<div (cli|)></div>
         ^ completing "(click)" will give
<div ((click))></div>

In the second, I think the expectation is that a "click" completion is available, giving

<div (cli|)></div>
         ^ completing "click" will give
<div (click)></div>

[ivanwonder]

It's weird, I use the same LSP and do not have this issue. don't know if it's vscode's issue

the LSP response the (click) item:

{
        "label": "(click)",
        "kind": 10,
        "detail": "attribute",
        "sortText": "click",
        "textEdit": {
            "range": {
                "start": {
                    "line": 13,
                    "character": 6
                },
                "end": {
                    "line": 13,
                    "character": 6
                }
            },
            "newText": "(click)"
        }
    }

It's still a little different from the previous version whose range contains ()

{
        "label": "(click)",
        "kind": 10,
        "detail": "attribute",
        "sortText": "click",
        "textEdit": {
            "range": {
                "start": {
                    "line": 13,
                    "character": 5
                },
                "end": {
                    "line": 13,
                    "character": 7
                }
            },
            "newText": "(click)"
        }
    }

Or use filterText: "click"

[ayazhafiz]

Yes. The reason they differ is because the language service now explicitly tells an editor what text to replace, and in the past the editor got to make that choice. One fix is to provide more precise completions (eg only event bindings in an event binding) and/or conditionally allow the replacement span to include non-identifier characters (https://github.com/angular/angular/blob/master/packages/language-service/src/completions.ts#L48-L51)

[ivanwonder]

So, I think it should tell the vscode to filter the CompletionItem by click, now it uses the label (click).

<div (cli|) ></div>
         ^ expect "click" completion here

It's weird, in my vscode, it can't match the label (click), but it's ok for click.

[shifenis]

Anyone have any workaround?

[kyliau]

This bug requires multiple PRs for a proper fix.
First PR: https://github.com/angular/angular/pull/34440
I hope to get it fixed by end of this week (December 20)

[kyliau]

Second PR: https://github.com/angular/angular/pull/34445
This should completely fix the problem.
I'll try to get this into 9.0.0-rc.7 so that the fix can go out this week.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}