From 7ac5e596ce6d5e5dc8c0e85c724c74b7805ffb73 Mon Sep 17 00:00:00 2001
From: Jake Bailey <5341706+jakebailey@users.noreply.github.com>
Date: Fri, 10 Dec 2021 12:47:13 -0800
Subject: [PATCH] Big comment

---
 src/services/completions.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/services/completions.ts b/src/services/completions.ts
index bf3432a44cf49..23722e43224e4 100644
--- a/src/services/completions.ts
+++ b/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") {