Auto-closing of tags within curly braces {} does not work when parent element is same tag in JSX

[Strikerzs]

🔎 Search Terms

typescript javascript jsx auto close closing div tag curly brackets braces

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX auto-closing

⏯ Playground Link

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wFgAoCtCAOwGd4BhXSGpG+AXjgAoBKOJwB8cAN4U4kuNXpYIEQXEwoANnSQUJUojACuUGry1SpAHgAmwAG5DjJ+6Mzy4AMhdwL1oQF84Aej84cwgkOjgaCHgUXRgFNBUIdSDrOAALJCI7E1M-Sxs7PgpvIA

💻 Code

import React from "react"

const Component = () => {
    const foo = false

    return (
        <div> // this has to be a div, changing it to another tag (e.g. <main>) corrects the functionality of closing tag below
            {foo && <div>} // does not auto close div here
        </div>
    )
}

🙁 Actual behavior

When working with JSX (both in TypeScript and JavaScript), the auto-closing functionality for HTML tags does not work as expected within curly braces {}. The closing tag (e.g., ) is not automatically inserted when opening a tag inside curly braces when the outer or parent element tag is the same.

🙂 Expected behavior

The auto-closing functionality should work for HTML tags within curly braces {} in JSX, just like it does for tags outside of curly braces. When opening a tag (e.g., <div>) within curly braces, the closing tag (e.g., </div>) should be automatically inserted even when parent element tag is the same.

Additional information about the issue

No response

[starball5]

Related on Stack Overflow: Only div tag not closing in TypeScript JSX in VS Code