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

🔎 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

Inizia riproducendo l’esempio JSX nel TypeScript Playground collegato, confrontando gli elementi esterno e interno quando i loro tag coincidono rispetto a quando differiscono. Traccia il comportamento di chiusura automatica delle espressioni JSX negli strumenti TypeScript pertinenti, quindi verifica che un tag di apertura all’interno di parentesi graffe riceva il relativo tag di chiusura anche quando l’elemento padre usa lo stesso tag.