fix(language-service): Do not provide element completions in end tag (#60616)

atscott · atscott · commit a22b13f99041 · 2025-04-03T10:36:32.000-07:00
Element completions should not be provided when the position is in the end tag or between the start and end tags. fixes angular/vscode-ng-language-service#2157 PR Close #60616
diff --git a/packages/language-service/src/completions.ts b/packages/language-service/src/completions.ts
@@ -904,6 +904,14 @@ export class CompletionBuilder<N extends TmplAstNode | AST> {
       // Nothing to do without an element to process.
       return undefined;
     }
+    if (
+      element.endSourceSpan &&
+      isWithin(this.position, element.endSourceSpan) &&
+      // start and end spans are the same for self closing tags
+      element.endSourceSpan.start !== element.startSourceSpan.start
+    ) {
+      return undefined;
+    }
 
     let replacementSpan: ts.TextSpan | undefined = undefined;
     if (
diff --git a/packages/language-service/test/completions_spec.ts b/packages/language-service/test/completions_spec.ts
@@ -970,6 +970,27 @@ describe('completions', () => {
           expectContain(completions, DisplayInfoKind.EVENT, ['(click)']);
         });
 
+        it('should return event completion for self closing tag', () => {
+          const {templateFile} = setup(`<br />`, ``);
+          templateFile.moveCursorToText(`<br ¦`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expectContain(completions, DisplayInfoKind.EVENT, ['(click)']);
+        });
+
+        it('should not return element completions in end tag', () => {
+          const {templateFile} = setup(`<button ></button>`, ``);
+          templateFile.moveCursorToText(`</¦button>`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expect(completions).not.toBeDefined();
+        });
+
+        it('should not return element completions in between start and end tag', () => {
+          const {templateFile} = setup(`<button></button>`, ``);
+          templateFile.moveCursorToText(`<button>¦</button>`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expect(completions).not.toBeDefined();
+        });
+
         it('should return event completion with empty parens', () => {
           const {templateFile} = setup(`<button ()></button>`, ``);
           templateFile.moveCursorToText(`<button (¦)>`);
