Big comment

src/services/completions.ts

@@ -739,10 +739,22 @@ 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
-            && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos) // Disable snippet for the first attribute, which is actually the tag name.
+            && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos)
             && preferences.includeCompletionsWithSnippetText
             && preferences.jsxAttributeCompletionStyle
             && preferences.jsxAttributeCompletionStyle !== "none") {