From d569e4a3629f83fb1fedc91fe1e06ff07ce35b7c Mon Sep 17 00:00:00 2001
From: Jake Bailey <5341706+jakebailey@users.noreply.github.com>
Date: Tue, 18 Jan 2022 19:07:34 -0800
Subject: [PATCH 1/3] Add failing test case

---
 ...AttributeSnippetCompletionAfterTypeArgs.ts | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 tests/cases/fourslash/jsxAttributeSnippetCompletionAfterTypeArgs.ts

diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionAfterTypeArgs.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionAfterTypeArgs.ts
new file mode 100644
index 0000000000000..f22d6a7c86e4f
--- /dev/null
+++ b/tests/cases/fourslash/jsxAttributeSnippetCompletionAfterTypeArgs.ts
@@ -0,0 +1,55 @@
+/// <reference path="fourslash.ts" />
+//@Filename: file.tsx
+
+////declare const React: any;
+////
+////namespace JSX {
+////    export interface IntrinsicElements {
+////        div: any;
+////    }
+////}
+////
+////function GenericElement<T>(props: {xyz?: T}) {
+////    return <></>
+////}
+////
+////function fn1() {
+////    return <div>
+////        <GenericElement<number> /*1*/ />
+////    </div>
+////}
+////
+////function fn2() {
+////    return <>
+////        <GenericElement<number> /*2*/ />
+////    </>
+////}
+////function fn3() {
+////    return <div>
+////        <GenericElement<number> /*3*/ ></GenericElement>
+////    </div>
+////}
+////
+////function fn4() {
+////    return <>
+////        <GenericElement<number> /*4*/ ></GenericElement>
+////    </>
+////}
+
+verify.completions(
+    {
+        marker: test.markers(),
+        includes: {
+            name: "xyz",
+            insertText: "xyz={$1}",
+            text: "(property) xyz?: number",
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember
+        },
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        },
+    },
+)

From fc3b4877378758df1653a7c2b5dacc50d7c98999 Mon Sep 17 00:00:00 2001
From: Jake Bailey <5341706+jakebailey@users.noreply.github.com>
Date: Tue, 18 Jan 2022 20:37:47 -0800
Subject: [PATCH 2/3] Don't block completion after end of type parameters in
 JSX elements

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

diff --git a/src/services/completions.ts b/src/services/completions.ts
index d9e856c195829..d8acf31df101d 100644
--- a/src/services/completions.ts
+++ b/src/services/completions.ts
@@ -2543,6 +2543,15 @@ namespace ts.Completions {
             }
 
             if (contextToken.kind === SyntaxKind.GreaterThanToken && contextToken.parent) {
+                // <Component<string> /**/ />
+                // <Component<string> /**/ ><Component>
+                // - contextToken: GreaterThanToken (before cursor)
+                // - location: JsxSelfClosingElement or JsxOpeningElement
+                // - contextToken.parent === location
+                if (location === contextToken.parent && (location.kind === SyntaxKind.JsxOpeningElement || location.kind === SyntaxKind.JsxSelfClosingElement)) {
+                    return false;
+                }
+
                 if (contextToken.parent.kind === SyntaxKind.JsxOpeningElement) {
                     // Two possibilities:
                     //   1. <div>/**/

From ff95001fce077532f858096ff5b5d6b30fb9a026 Mon Sep 17 00:00:00 2001
From: Jake Bailey <5341706+jakebailey@users.noreply.github.com>
Date: Wed, 26 Jan 2022 14:24:09 -0800
Subject: [PATCH 3/3] Modify comment to reflect what location is when cursur is
 inside opening element

---
 src/services/completions.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/services/completions.ts b/src/services/completions.ts
index d8acf31df101d..a7a47193da622 100644
--- a/src/services/completions.ts
+++ b/src/services/completions.ts
@@ -2553,15 +2553,10 @@ namespace ts.Completions {
                 }
 
                 if (contextToken.parent.kind === SyntaxKind.JsxOpeningElement) {
-                    // Two possibilities:
-                    //   1. <div>/**/
-                    //      - contextToken: GreaterThanToken (before cursor)
-                    //      - location: JSXElement
-                    //      - different parents (JSXOpeningElement, JSXElement)
-                    //   2. <Component<string> /**/>
-                    //      - contextToken: GreaterThanToken (before cursor)
-                    //      - location: GreaterThanToken (after cursor)
-                    //      - same parent (JSXOpeningElement)
+                    // <div>/**/
+                    // - contextToken: GreaterThanToken (before cursor)
+                    // - location: JSXElement
+                    // - different parents (JSXOpeningElement, JSXElement)
                     return location.parent.kind !== SyntaxKind.JsxOpeningElement;
                 }