Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attribute incorrectly added for opening JSX tag #47090

Closed
ericsj opened this issue Dec 9, 2021 · 6 comments · Fixed by #47412
Closed

Attribute incorrectly added for opening JSX tag #47090

ericsj opened this issue Dec 9, 2021 · 6 comments · Fixed by #47412
Assignees
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue

Comments

@ericsj
Copy link

ericsj commented Dec 9, 2021

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.63.0
  • OS Version: Ubuntu 20.04.1

Steps to Reproduce:

  1. Create a functional React component
  2. Inside the element's return create a React Fragment
  3. Inside the fragment's scope type "<" and start typing a html element name until intellisense suggests some. Type tab or enter. Instead of "button" for example, it will place "button={}"
@mjbvz mjbvz transferred this issue from microsoft/vscode Dec 9, 2021
@mjbvz mjbvz removed their assignment Dec 9, 2021
@mjbvz mjbvz changed the title Intellisense malfunction inside React Fragment Attribute incorrectly added for opening JSX tag Dec 9, 2021
@mjbvz
Copy link
Contributor

mjbvz commented Dec 9, 2021

@armanio123 @RyanCavanaugh This looks like a potential candidate for the TS recovery build. Even when you set "javascript.preferences.jsxAttributeCompletionStyle": "none", the = still ends up being inserted

@RyanCavanaugh
Copy link
Member

@mjbvz good catch, this is annoying as heck

@RyanCavanaugh RyanCavanaugh added the Bug A bug in TypeScript label Dec 10, 2021
@RyanCavanaugh RyanCavanaugh added this to the TypeScript 4.5.3 milestone Dec 10, 2021
@RyanCavanaugh
Copy link
Member

namespace JSX {
    export interface IntrinsicElements {
        button: any;
        div: any;
    }
}
function fn() {
    return <>
        <butto
    </>;
}

Bring up completion and tab-complete at butto, the new text is

    <button={}

when it should be (as was in 4.4)

    <button

@jakebailey
Copy link
Member

jakebailey commented Dec 10, 2021

Even when you set "javascript.preferences.jsxAttributeCompletionStyle": "none", the = still ends up being inserted

I can't reproduce that bit; are you in a tsx, which instead works on "typescript.preferences.jsxAttributeCompletionStyle" (note the "typescript")? The new snippet code does check the preference explicitly.

In any case, I've sent #47096; what was happening was that in this broken AST, it looks like an attribute, when in fact it's the tag name. 4.4 didn't have JSX attribute snippets, so never had to care about this detail.

@mjbvz
Copy link
Contributor

mjbvz commented Dec 10, 2021

Thanks for taking a look @jakebailey! The VS Code recovery build will go our Tuesday. Would it be possible to get this into a published TS 4.5.4 by then?

@DanielRosenwasser
Copy link
Member

Yes, I think we can do a cherry-pick/build.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue
Projects
None yet
6 participants