Pressing dot breaks jsx

[Zombobot1]

Some time ago I noticed that something inserts invalid jsx (in a .tsx file) and I found a bug.
If I press dot while the suggestion menu is open invalid jsx ={} gets inserted.

Outside jsx there is no such problem

Extension version v5.0.202301100
Tested on Mac

[shiftinv]

I'm experiencing the same thing, on Linux + also using v5.0.202301100.

Something similar appears to happen when pressing Enter instead of . while the suggestion menu is open, which inserts ={} as well, resulting in id={props={}}.

Downgrading the extension to v5.0.202301090 seemed to solve these issues for now.

[arnad]

The issue happens when you autocomplete a suggestion while editing JSX elements, regardless if it was by pressing commit character (such as .) or Return/Enter.

It doesn't occur if the editing happens within JSX file/React component, but outside tag code.

These are the outcomes of autocompleting suggestion by pressing .

Outside of a JSX tag

Inside of a JSX tag

Reproduced in version: v5.0.202301160

[mjbvz]

Minimal repo:

const a = <div id={JSO|}></div>

Trigger suggestions for JSON

Here's the completionInfo response

        {
            "name": "JSON",
            "kind": "var",
            "kindModifiers": "declare",
            "sortText": "15",
            "insertText": "JSON={$1}",
            "isSnippet": true
        },

[pyBlob]

I can reproduce this when using tsserver through the vscode language server.

I tried to reproduce this in tsserver and using fourslash, but in all responses, and "verify.completions", I never received a completionInfo with "insertText". Do you have some hints on how to make a raw tsserver or the fourslash tests behave the same like vscode+tsserver?

This is what I've tried so far in the new test tests/cases/fourslash/completionsJsxAttributeInitializer3.ts:

// @Filename: /a.tsx
////declare namespace JSX {
////    interface IntrinsicElements {
////        div: { a: string, b: string }
////    }
////}
////const value = "test"
////<div a={[|val/*0*/|]} />

verify.completions(
    {
        marker: "0",
        isNewIdentifierLocation: true,
        includes: {
            name: "value",
            kind: "const",
            kindModifiers: "",
            sortText: completion.SortText.LocationPriority,
        },
        preferences: {
            includeCompletionsWithSnippetText: true,
            includeCompletionsWithInsertText: true,
        },
    },
);

I didn't find out, why this only happens in vscode, but while debugging, I found this:

TypeScript/src/services/completions.ts

Line 2901 in 7f41c90

if (previousToken.kind === SyntaxKind.CloseBraceToken || (previousToken.kind === SyntaxKind.Identifier || previousToken.parent.kind === SyntaxKind.JsxAttribute)) {

It mentions that // Second case is for "<div foo={true} t[||] ></div>":

• The previous token is the identifier t.
• The parent of the previous token is a JsxAttribute without initializer. Therefore, the second || should have probably been a &&.

if (previousToken.kind === SyntaxKind.CloseBraceToken || (previousToken.kind === SyntaxKind.Identifier && previousToken.parent.kind === SyntaxKind.JsxAttribute))

Note that this is exactly the case that is triggered in this issue: <div a={val/**/} />

• The context token is { whose parent is the JsxExpression that initialized the attribute.
• The previous token is the identifier val that needs completion → matches previousToken.kind === SyntaxKind.Identifier
• The parent of the previous token is also the JsxExpression → already an initializer, because it does not match previousToken.parent.kind === SyntaxKind.JsxAttribute

I think this is enough for a pull request, though I would also like to provide a failing fourslash testcase.

[jakebailey]

If you can't get this in as fourslash but can get a trace, you can try doing it as done in this PR: #52373

Where you effectively write the trace into a unit test and baseline the responses.