diff --git a/tests/cases/fourslash/jsxTagNameDottedAttributeSnippet.ts b/tests/cases/fourslash/jsxTagNameDottedAttributeSnippet.ts
index f1b717ba0d8f6..0f8b4e857d19c 100644
--- a/tests/cases/fourslash/jsxTagNameDottedAttributeSnippet.ts
+++ b/tests/cases/fourslash/jsxTagNameDottedAttributeSnippet.ts
@@ -17,6 +17,11 @@
 ////        <Foo.Foo /*2*/
 ////    </Foo>
 ////}
+////function fn3() {
+////    return <Foo>
+////        <Foo.Foo cla/*3*/
+////    </Foo>
+////}
 
 verify.completions(
     {
diff --git a/tests/cases/fourslash/jsxTagNameDottedAttributeSnippetClosed.ts b/tests/cases/fourslash/jsxTagNameDottedAttributeSnippetClosed.ts
new file mode 100644
index 0000000000000..aa75628733925
--- /dev/null
+++ b/tests/cases/fourslash/jsxTagNameDottedAttributeSnippetClosed.ts
@@ -0,0 +1,38 @@
+/// <reference path="fourslash.ts" />
+//@Filename: file.tsx
+////interface NestedInterface {
+////    Foo: NestedInterface;
+////    (props: {className?: string}): any;
+////}
+////
+////declare const Foo: NestedInterface;
+////
+////function fn1() {
+////    return <Foo>
+////        <Foo /*1*/ />
+////    </Foo>
+////}
+////function fn2() {
+////    return <Foo>
+////        <Foo.Foo /*2*/ />
+////    </Foo>
+////}
+////function fn3() {
+////    return <Foo>
+////        <Foo.Foo cla/*3*/ />
+////    </Foo>
+////}
+
+verify.completions(
+    {
+        marker: test.markers(),
+        includes: [
+            { name: "className", insertText: 'className={$1}', isSnippet: true, sortText: completion.SortText.OptionalMember }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        },
+    }
+)
diff --git a/tests/cases/fourslash/jsxTagNameDottedNoSnippetClosed.ts b/tests/cases/fourslash/jsxTagNameDottedNoSnippetClosed.ts
new file mode 100644
index 0000000000000..6d1af353626b7
--- /dev/null
+++ b/tests/cases/fourslash/jsxTagNameDottedNoSnippetClosed.ts
@@ -0,0 +1,53 @@
+/// <reference path="fourslash.ts" />
+//@Filename: file.tsx
+////interface NestedInterface {
+////    Foo: NestedInterface;
+////    (props: {}): any;
+////}
+////
+////declare const Foo: NestedInterface;
+////
+////function fn1() {
+////    return <Foo>
+////        </*1*/ />
+////    </Foo>
+////}
+////function fn2() {
+////    return <Foo>
+////        <Fo/*2*/ />
+////    </Foo>
+////}
+////function fn3() {
+////    return <Foo>
+////        <Foo./*3*/ />
+////    </Foo>
+////}
+////function fn4() {
+////    return <Foo>
+////        <Foo.F/*4*/ />
+////    </Foo>
+////}
+////function fn5() {
+////    return <Foo>
+////        <Foo.Foo./*5*/ />
+////    </Foo>
+////}
+////function fn6() {
+////    return <Foo>
+////        <Foo.Foo.F/*6*/ />
+////    </Foo>
+////}
+
+verify.completions(
+    {
+        marker: test.markers(),
+        includes: [
+            { name: "Foo", insertText: undefined, isSnippet: undefined }
+        ],
+        preferences: {
+            jsxAttributeCompletionStyle: "braces",
+            includeCompletionsWithSnippetText: true,
+            includeCompletionsWithInsertText: true,
+        },
+    }
+)