Pressing dot breaks jsx #52288

Activity

1. shiftinv commented on Jan 16, 2023

   

   vi (shiftinv)

   on Jan 16, 2023

   More actions

   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.
2. arnad commented on Jan 17, 2023

   

   Arnad Voljevica (arnad)

   on Jan 17, 2023

   More actions

   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
3. Matt Bierner (mjbvz)

   transferred this issue frommicrosoft/vscode-typescript-nexton Jan 18, 2023
4. mjbvz commented on Jan 18, 2023

   

   Matt Bierner (mjbvz)

   on Jan 18, 2023

   Contributor

   More actions

   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
           },
   
   
5. Daniel Rosenwasser (DanielRosenwasser)

   added

   BugA bug in TypeScriptA bug in TypeScript

   Help WantedYou can do thisYou can do this

   Effort: ModerateRequires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual".Requires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual".

   Domain: LS: Completion ListsThe issue relates to showing completion lists in an editorThe issue relates to showing completion lists in an editor

   on Jan 20, 2023
6. pyBlob commented on Jan 31, 2023

   

   pyBlob

   on Jan 31, 2023

   Last edited by pyBlob

   Contributor

   More actions

   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.
7. jakebailey commented on Jan 31, 2023

   

   Jake Bailey (jakebailey)

   on Jan 31, 2023

   Member

   More actions

   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.
8. pyBlob commented on Feb 2, 2023

   

   pyBlob

   on Feb 2, 2023

   Last edited by pyBlob

   Contributor

   More actions

   Pull request is running checks, comments appreciated.
9. Ryan Cavanaugh (RyanCavanaugh)

   added this to the Backlog milestone on Feb 2, 2023
10. Gabriela Araujo Britto (gabritto)

    closed this as completedin #52572on Feb 4, 2023
11. microsoft

    locked as resolved and limited conversation to collaborators on Oct 22, 2025