Don't block completion after end of type parameters in JSX elements (microsoft#47501)

Author: jakebailey

src/services/completions.ts

@@ -2543,16 +2543,20 @@ 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>/**/
-                    //      - 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;
                 }
 

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,
+        },
+    },
+)