Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular template code completion removes trailing quote #1626

Closed
rekna1 opened this issue Apr 10, 2022 · 4 comments
Closed

Angular template code completion removes trailing quote #1626

rekna1 opened this issue Apr 10, 2022 · 4 comments

Comments

@rekna1
Copy link

rekna1 commented Apr 10, 2022

Issue Type: Bug

When I'm using code completion in angular template it's annoying that the trailing quote is removed upon selection of any of the suggestions.

e.g. in the example below I get code completion suggestion on model
[(ngModel)]="model.|" id="name"

after I select a property on model (tried with enter or tab) the trailing quote is removed:
[(ngModel)]="model.Name id="name"

On top of that, after some time, angular language service stops providing code completion, if I change something in settings of plugin (logging level) it works again (probably just because changing this causes the plugin to reinitialize completely.

Extension version: 13.3.0
VS Code version: Code 1.66.1 (8dfae7a5cd50421d10cd99cb873990460525a898, 2022-04-06T14:50:12.141Z)
OS version: Windows_NT x64 10.0.19043
Restricted Mode: No

A/B Experiments 
vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vstes627:30244334
pythonvspyl392:30443607
pythontb:30283811
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
pythonvspyt200:30340761
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
vsc1dst:30438360
pythonvs932:30410667
wslgetstarted:30449410
pythonvsnew555:30457759
vscscmwlcmt:30465135
pynewfile477:30463512
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 10, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
702bfe3 
…he trailing quote

For two-way binding syntax, the Angular compiler will append the ` =$event` to the expression of
`BoundEvent`.
https://github.com/angular/angular/blob/e0ac61412137144a43dc5a2134b4cd620bb4c30f/packages/compiler/src/render3/r3_template_transform.ts#L493
For example, the `[(model)]="title.¦"`, the expression of `BoundEvent` will be converted to
`title.¦ =$event`.
        ^------ this blank will be included in the `replacementSpan` of completion item.
When the user selects an item, the trailing quote will be removed.

Now the paths include `BoundAttribute` and `BoundEvent` for the two-way binding syntax. So the
`BoundEvent` should be removed from the paths and use the `BoundAttribute` instead.

Fixes angular/vscode-ng-language-service#1626
@ivanwonder ivanwonder mentioned this issue Apr 10, 2022
Closed
14 tasks
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 10, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
faf8e9c 
…he trailing quote

For two-way binding syntax, the Angular compiler will append the ` =$event` to the expression of
`BoundEvent`.
https://github.com/angular/angular/blob/e0ac61412137144a43dc5a2134b4cd620bb4c30f/packages/compiler/src/render3/r3_template_transform.ts#L493
For example, the `[(model)]="title.¦"`, the expression of `BoundEvent` will be converted to
`title.¦ =$event`.
        ^------ this blank will be included in the `replacementSpan` of completion item.
When the user selects an item, the trailing quote will be removed.

Now the paths include `BoundAttribute` and `BoundEvent` for the two-way binding syntax. So the
`BoundEvent` should be removed from the paths and use the `BoundAttribute` instead.

Fixes angular/vscode-ng-language-service#1626
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 10, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
cd119fe 
…he trailing quote

For two-way binding syntax, the Angular compiler will append the ` =$event` to the expression of
`BoundEvent`.
https://github.com/angular/angular/blob/e0ac61412137144a43dc5a2134b4cd620bb4c30f/packages/compiler/src/render3/r3_template_transform.ts#L493
For example, the `[(model)]="title.¦"`, the expression of `BoundEvent` will be converted to
`title.¦ =$event`.
        ^------ this blank will be included in the `replacementSpan` of completion item.
When the user selects an item, the trailing quote will be removed.

Now the paths include `BoundAttribute` and `BoundEvent` for the two-way binding syntax. So the
`BoundEvent` should be removed from the paths and use the `BoundAttribute` instead.

Fixes angular/vscode-ng-language-service#1626
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 10, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
56720da 
…he trailing quote

For two-way binding syntax, the Angular compiler will append the ` =$event` to the expression of
`BoundEvent`.
https://github.com/angular/angular/blob/e0ac61412137144a43dc5a2134b4cd620bb4c30f/packages/compiler/src/render3/r3_template_transform.ts#L493
For example, the `[(model)]="title.¦"`, the expression of `BoundEvent` will be converted to
`title.¦ =$event`.
        ^------ this blank will be included in the `replacementSpan` of completion item.
When the user selects an item, the trailing quote will be removed.

Now the paths include `BoundAttribute` and `BoundEvent` for the two-way binding syntax. So the
`BoundEvent` should be removed from the paths and use the `BoundAttribute` instead.

Fixes angular/vscode-ng-language-service#1626
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 10, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
bbfce2d 
…he trailing quote

For two-way binding syntax, the Angular compiler will append the ` =$event` to the expression of
`BoundEvent`.
https://github.com/angular/angular/blob/e0ac61412137144a43dc5a2134b4cd620bb4c30f/packages/compiler/src/render3/r3_template_transform.ts#L493
For example, the `[(model)]="title.¦"`, the expression of `BoundEvent` will be converted to
`title.¦ =$event`.
        ^------ this blank will be included in the `replacementSpan` of completion item.
When the user selects an item, the trailing quote will be removed.

Now the paths include `BoundAttribute` and `BoundEvent` for the two-way binding syntax. So the
`BoundEvent` should be removed from the paths and use the `BoundAttribute` instead.

Fixes angular/vscode-ng-language-service#1626
ivanwonder added a commit to ivanwonder/angular that referenced this issue Apr 15, 2022
@ivanwonder
fix(language-service): two-way binding completion should not remove t…
af58ff8 
…he trailing quote

We allow the path to contain both the `t.BoundAttribute` and `t.BoundEvent` for two-way
bindings but do not want the path to contain both the `t.BoundAttribute` with its
children when the position is in the value span because we would then logically create a path
that also contains the `PropertyWrite` from the `t.BoundEvent`. This early return condition
ensures we target just `t.BoundAttribute` for this case and exclude `t.BoundEvent` children.

Fixes angular/vscode-ng-language-service#1626
dylhunn pushed a commit to angular/angular that referenced this issue Apr 15, 2022
@ivanwonder @dylhunn
fix(language-service): two-way binding completion should not remove t…
d68333e 
…he trailing quote (#45582)

We allow the path to contain both the `t.BoundAttribute` and `t.BoundEvent` for two-way
bindings but do not want the path to contain both the `t.BoundAttribute` with its
children when the position is in the value span because we would then logically create a path
that also contains the `PropertyWrite` from the `t.BoundEvent`. This early return condition
ensures we target just `t.BoundAttribute` for this case and exclude `t.BoundEvent` children.

Fixes angular/vscode-ng-language-service#1626

PR Close #45582
@atscott atscott reopened this Apr 21, 2022
@atscott
Copy link
Collaborator

atscott commented May 2, 2022

Fixed by angular/angular#45582 and included in the release from today

@atscott atscott closed this as completed May 2, 2022
@rekna1
Copy link
Author

rekna1 commented May 23, 2022

I"m still experiencing this problem and also language serice code completion not working all the time ... version
Plugin Last updated 13-5-2022 01:16:59 v13.3.4
Do I need to update angular as well for this , still on version 13.3.3

@atscott
Copy link
Collaborator

atscott commented May 23, 2022

@rekna1 This was fixed in 13.3.2. I can reproduce it in 13.3.1 and 13.3.0 but as soon as I upgrade to 13.3.3, I cannot reproduce it.

"also language serice code completion not working all the time" - Please do not combine two reports into a single issue. The investigation here is only focused on the resolution for the trailing quote being removed. There are known issues in 13.3.3 so upgrading to 13.3.4 may resolve this other issue.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(language-service): two-way binding completion should not remove t… ivanwonder/angular
2 participants
@atscott @rekna1