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

Start by reproducing the JSX example in the linked TypeScript Playground, comparing the outer and inner elements when their tags match versus differ. Trace the auto-closing behavior for JSX expressions in the relevant TypeScript tooling, then verify that an opening tag inside curly braces receives its closing tag even when the parent uses the same tag.