Eslint-plugin-react: jsx-closing-bracket-location think of 'space' and 'tab' as the same thing

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

my config

"react/jsx-indent": ["warn", "tab"],
"react/jsx-indent-props": ["warn", "tab"],
"react/jsx-closing-bracket-location": ["warn", {
  "nonEmpty": "tag-aligned"
}],

my code

        <div
            className={ styles.header_title }
  >
            { props.title }
        </div>

opening tag has 2 tabs, closing bracket has 2 spaces but this case doesn't have any warning or error.

[iTob191]

Using --fix also results in an output like above.

[Kyle-Mendes]

I'm still seeing this issue. It's causing a lot of problems on a big team, some people aren't used to working with tabs and the only way to catch the issue is via code review.

[Moong0122]

May I try to solve this bug?

[ljharb]

@Moong0122 yes, anything with the "help wanted" label that doesn't already have a PR, you can just make a PR for it :-)

[Moong0122]

I understand that if the rule react/jsx-indent": ["warn", "tab"] is used, an error occurs when the tab is not used.
But there's no error in the code here.
Where do you think the problem occurred between react/jsx-indent and jsx-closing-bracket-location?

[ljharb]

I would expect jsx-closing-bracket-location to be the thing that warns, because jsx-indent would determine where <div is, and then closing-bracket-location would use that to determine where > should be.