From 4b69e1342e189efdde0f25fdc410cde0a5e883e8 Mon Sep 17 00:00:00 2001
From: Vitaly <vital2580@icloud.com>
Date: Mon, 9 Jan 2023 20:13:27 +0300
Subject: [PATCH] Basic JSX attribute snippet fixes (#51855)

Co-authored-by: Andrew Branch <andrewbranch@users.noreply.github.com>
---
 src/services/completions.ts                   |  7 +++---
 .../jsxAttributeSnippetCompletionClosed.ts    | 24 +++++++++++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/services/completions.ts b/src/services/completions.ts
index cec01139bef..a166845ba3e 100644
--- a/src/services/completions.ts
+++ b/src/services/completions.ts
@@ -2875,8 +2875,10 @@ function getCompletionData(
 
                 case SyntaxKind.JsxExpression:
                 case SyntaxKind.JsxSpreadAttribute:
-                    // For `<div foo={true} [||] ></div>`, `parent` will be `{true}` and `previousToken` will be `}`
-                    if (previousToken.kind === SyntaxKind.CloseBraceToken && currentToken.kind === SyntaxKind.GreaterThanToken) {
+                    // First case is for `<div foo={true} [||] />` or `<div foo={true} [||] ></div>`,
+                    // `parent` will be `{true}` and `previousToken` will be `}`
+                    // Second case is for `<div foo={true} t[||] ></div>`
+                    if (previousToken.kind === SyntaxKind.CloseBraceToken || (previousToken.kind === SyntaxKind.Identifier || previousToken.parent.kind === SyntaxKind.JsxAttribute)) {
                         isJsxIdentifierExpected = true;
                     }
                     break;
@@ -5215,4 +5217,3 @@ function toUpperCharCode(charCode: number) {
     }
     return charCode;
 }
-
diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionClosed.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionClosed.ts
index 993561b53f5..636c5bb1ab2 100644
--- a/tests/cases/fourslash/jsxAttributeSnippetCompletionClosed.ts
+++ b/tests/cases/fourslash/jsxAttributeSnippetCompletionClosed.ts
@@ -2,7 +2,7 @@
 //@Filename: file.tsx
 ////interface NestedInterface {
 ////    Foo: NestedInterface;
-////    (props: {className?: string}): any;
+////    (props: {className?: string, onClick?: () => void}): any;
 ////}
 ////
 ////declare const Foo: NestedInterface;
@@ -52,12 +52,27 @@
 ////function fn11() {
 ////    return <Foo something cla/*11*/ />
 ////}
+////function fn12() {
+////    return <Foo something={false} cla/*12*/ />
+////}
+////function fn13() {
+////    return <Foo something={false} /*13*/ foo />
+////}
+////function fn14() {
+////    return <Foo something={false} cla/*14*/ foo />
+////}
+////function fn15() {
+////    return <Foo onC/*15*/="" />
+////}
+////function fn16() {
+////    return <Foo something={false} onC/*16*/="" foo />
+////}
 
 var preferences: FourSlashInterface.UserPreferences = {
     jsxAttributeCompletionStyle: "braces",
     includeCompletionsWithSnippetText: true,
     includeCompletionsWithInsertText: true,
-}; 
+};
 
 verify.completions(
     { marker: "1", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
@@ -71,4 +86,9 @@ verify.completions(
     { marker: "9", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
     { marker: "10", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
     { marker: "11", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
+    { marker: "12", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
+    { marker: "13", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
+    { marker: "14", preferences, includes: { name: "className", insertText: "className={$1}", text: "(property) className?: string", isSnippet: true, sortText: completion.SortText.OptionalMember } },
+    { marker: "15", preferences, includes: { name: "onClick", insertText: undefined, text: "(property) onClick?: () => void", isSnippet: undefined, sortText: completion.SortText.OptionalMember } },
+    { marker: "16", preferences, includes: { name: "onClick", insertText: undefined, text: "(property) onClick?: () => void", isSnippet: undefined, sortText: completion.SortText.OptionalMember } },
 )