Cherry-pick PR #47096 into release-4.5 (#47105)

Component commits:
191aa68 Disable JSX attribute snippet if attribute is acutally the HTML tag

1786d5e Add more tests of text before and after

7ac5e59 Big comment

Co-authored-by: Jake Bailey <5341706+jakebailey@users.noreply.github.com>

src/services/completions.ts

@@ -713,8 +713,25 @@ namespace ts.Completions {
             }
         }
 
+        // Before offering up a JSX attribute snippet, ensure that we aren't potentially completing
+        // a tag name; this may appear as an attribute after the "<" when the tag has not yet been
+        // closed, as in:
+        //
+        //     return <>
+        //         foo <butto|
+        //     </>
+        //
+        // We can detect this case by checking if both:
+        //
+        //     1. The location is "<", so we are completing immediately after it.
+        //     2. The "<" has the same position as its parent, so is not a binary expression.
         const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location);
-        if (kind === ScriptElementKind.jsxAttribute && preferences.includeCompletionsWithSnippetText && preferences.jsxAttributeCompletionStyle && preferences.jsxAttributeCompletionStyle !== "none") {
+        if (
+            kind === ScriptElementKind.jsxAttribute
+            && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos)
+            && preferences.includeCompletionsWithSnippetText
+            && preferences.jsxAttributeCompletionStyle
+            && preferences.jsxAttributeCompletionStyle !== "none") {
             let useBraces = preferences.jsxAttributeCompletionStyle === "braces";
             const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location);
 

tests/cases/fourslash/jsxAttributeAsTagNameNoSnippet.ts

@@ -0,0 +1,61 @@
+/// <reference path="fourslash.ts" />
+//@Filename: file.tsx
+////declare namespace JSX {
+////    interface IntrinsicElements {
+////        button: any;
+////        div: any;
+////    }
+////}
+////function fn() {
+////    return <>
+////        <butto/*1*/
+////    </>;
+////}
+////function fn2() {
+////    return <>
+////        preceding junk <butto/*2*/
+////    </>;
+////}
+////function fn3() {
+////    return <>
+////        <butto/*3*/ style=""
+////    </>;
+////}
+
+
+
+verify.completions(
+    {
+        marker: "1",
+        includes: [
+            { name: "button", insertText: undefined, isSnippet: undefined }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        }
+    },
+    {
+        marker: "2",
+        includes: [
+            { name: "button", insertText: undefined, isSnippet: undefined }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        }
+    },
+    {
+        marker: "3",
+        includes: [
+            { name: "button", insertText: undefined, isSnippet: undefined }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        }
+    },
+);