Disable JSX attribute snippet if attribute is acutally the HTML tag

jakebailey · jakebailey · commit 191aa682f811 · 2021-12-09T19:51:32.000-08:00
diff --git a/src/services/completions.ts b/src/services/completions.ts
@@ -740,7 +740,12 @@ namespace ts.Completions {
         }
 
         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) // Disable snippet for the first attribute, which is actually the tag name.
+            && preferences.includeCompletionsWithSnippetText
+            && preferences.jsxAttributeCompletionStyle
+            && preferences.jsxAttributeCompletionStyle !== "none") {
             let useBraces = preferences.jsxAttributeCompletionStyle === "braces";
             const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location);
 
diff --git a/tests/cases/fourslash/jsxAttributeAsTagNameNoSnippet.ts b/tests/cases/fourslash/jsxAttributeAsTagNameNoSnippet.ts
@@ -0,0 +1,28 @@
+/// <reference path="fourslash.ts" />
+//@Filename: file.tsx
+////declare namespace JSX {
+////    interface IntrinsicElements {
+////        button: any;
+////        div: any;
+////    }
+////}
+////function fn() {
+////    return <>
+////        <butto/*1*/
+////    </>;
+////}
+
+
+verify.completions(
+    {
+        marker: "1",
+        includes: [
+            { name: "button", insertText: undefined, isSnippet: undefined }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        }
+    },
+);
