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

Commencez par reproduire l’exemple JSX dans le TypeScript Playground lié, en comparant les éléments externe et interne lorsque leurs balises correspondent ou diffèrent. Suivez le comportement de fermeture automatique des expressions JSX dans les outils TypeScript concernés, puis vérifiez qu’une balise ouvrante à l’intérieur d’accolades reçoit sa balise fermante même lorsque le parent utilise la même balise.