fix jsx completions after attributes (#39859)

closes #39530
microsoft · Aug 13, 2020 · 0ed523b · 0ed523b
1 parent edc88c5
commit 0ed523b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/services/completions.ts b/src/services/completions.ts
@@ -1038,7 +1038,20 @@ namespace ts.Completions {
                         }
                         break;
 
+                    case SyntaxKind.JsxExpression:
+                        // For `<div foo={true} [||] ></div>`, `parent` will be `{true}` and `previousToken` will be `}`
+                        if (previousToken.kind === SyntaxKind.CloseBraceToken && currentToken.kind === SyntaxKind.GreaterThanToken) {
+                            isJsxIdentifierExpected = true;
+                        }
+                        break;
+
                     case SyntaxKind.JsxAttribute:
+                        // For `<div className="x" [||] ></div>`, `parent` will be JsxAttribute and `previousToken` will be its initializer
+                        if ((parent as JsxAttribute).initializer === previousToken &&
+                            previousToken.end < position) {
+                            isJsxIdentifierExpected = true;
+                            break;
+                        }
                         switch (previousToken.kind) {
                             case SyntaxKind.EqualsToken:
                                 isJsxInitializer = true;

diff --git a/tests/cases/fourslash/completionsJsxAttribute2.ts b/tests/cases/fourslash/completionsJsxAttribute2.ts
@@ -0,0 +1,27 @@
+/// <reference path="fourslash.ts" />
+
+// @jsx: preserve
+
+// @Filename: /a.tsx
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        div: {
+////            /** Doc */
+////            foo: boolean;
+////            bar: string;
+////            "aria-foo": boolean;
+////        }
+////    }
+////}
+////
+////<div foo /*1*/></div>;
+////<div foo={true} /*2*/></div>;
+////<div bar="test" /*3*/></div>;
+////<div aria-foo /*4*/></div>;
+
+
+verify.completions({ marker: "1", exact: ["bar", "aria-foo"] });
+verify.completions({ marker: "2", exact: ["bar", "aria-foo"] });
+verify.completions({ marker: "3", exact: ["foo", "aria-foo"] });
+verify.completions({ marker: "4", exact: ["foo", "bar"] });