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

リンク先の TypeScript Playground にある JSX の例を再現することから始め、タグが一致する場合と異なる場合で外側の要素と内側の要素を比較してください。関連する TypeScript ツールにおける JSX 式の自動クローズ動作を追跡し、そのうえで、親が同じタグを使用している場合でも、中括弧内の開始タグに対応する終了タグが付与されることを確認してください。