Eslint-plugin-react: jsx-indent props following a ternary

[IanBurganMod]

This example

const Test = ({ obj }) => (
  <div>
    {obj.property === 1
      ? (<span className="someClassName">Some Message</span>) : (null)}

    <button
      type="button"
      hasIndentError={true}
    >
      Button With Error
    </button>

    <button
      type="button"
      hasIndentError={false}
    >
      Button Without Error
    </button>
  </div>
)

export default Test

gives the errors

7:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
8:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props

This must be a bug because even if lines 7 and 8 are incorrectly indented, why is the second button not triggering an error? To be clear, lines 7 and 8 are correctly indented according to my configuration as I understand it. Also worth noting, the problem occurs with or without parentheses in the ternary expression.

Potentially related issues
https://github.com/yannickcr/eslint-plugin-react/issues/454
https://github.com/yannickcr/eslint-plugin-react/issues/1315

[ljharb]

That is very strange, thanks for the report.

[JustFly1984]

May be it is a conflict between different plugin rules, for example with prettier. Can you try to indent parts of the code yourself and look which rules are triggered to debug

[IanBurganMod]

May be it is a conflict between different plugin rules, for example with prettier. Can you try to indent parts of the code yourself and look which rules are triggered to debug

I'm not using prettier and when I indent the first button, the linter error goes away and everything passes. Of course this is undesirable because then the indentation is wrong. Another interesting oddity that might be worth mentioning is that removing the className from the span causes the erroneous jsx-indent-props error to go away and the code is correctly indented. I noticed this when creating this test example.

Here are my plugins for reference.

  "devDependencies": {
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.4",
    "eslint-plugin-react-hooks": "^4.1.2"
  }

[ljharb]

@IanBurganMod can you try with eslint-plugin-react v7.21.3, v7.21.2, etc, to try to figure out where the problem started?

[IanBurganMod]

Everything behaves correctly in both v7.21.3,v7.21.2. The incorrect behavior is introduced in v7.21.4. Because both .3 and .2 were working, I didn't continue back further.

[ljharb]

What about v7.21.5?

[IanBurganMod]

@ljharb Fixed! Thank you, that was impressively fast :)

[ljharb]

v7.21.5 was published about 12 hours before you filed this issue :-) glad it worked!