From 3db52859132d1477f3ad38dc915a9b4870356890 Mon Sep 17 00:00:00 2001
From: Tobias Waltl <tobias.waltl@mobilexag.de>
Date: Tue, 14 Dec 2021 09:51:53 +0100
Subject: [PATCH] [Fix] `jsx-indent-props`: Reset `line.isUsingOperator`
 correctly after ternary

---
 CHANGELOG.md                        |   4 +
 lib/rules/jsx-indent-props.js       |   2 +-
 tests/lib/rules/jsx-indent-props.js | 264 ++++++++++++++++++++++++++++
 3 files changed, 269 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4e7f5783d..0b3d7ec9c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,12 +8,16 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Added
 * [`function-component-definition`]: support namedComponents option being an array ([#3129][] @petersendidit)
 
+### Fixed
+* [`jsx-indent-props`]: Reset `line.isUsingOperator` correctly after ternary ([#3146][] @tobiaswaltl)
+
 ### Changed
 * [Refactor] [`no-arrow-function-lifecycle`], [`no-unused-class-component-methods`]: use report/messages convention (@ljharb)
 * [Tests] component detection: Add testing scaffolding ([#3149][] @duncanbeevers)
 * [New] component detection: track React imports ([#3149][] @duncanbeevers)
 
 [#3149]: https://github.com/yannickcr/eslint-plugin-react/pull/3149
+[#3146]: https://github.com/yannickcr/eslint-plugin-react/pull/3146
 [#3129]: https://github.com/yannickcr/eslint-plugin-react/pull/3129
 
 ## [7.27.1] - 2021.11.18
diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js
index 8935616988..5d33ded173 100644
--- a/lib/rules/jsx-indent-props.js
+++ b/lib/rules/jsx-indent-props.js
@@ -153,7 +153,7 @@ module.exports = {
 
       const indent = regExp.exec(src);
       const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);
-      const useBracket = /^([ ]|[\t])*[<]/.test(src);
+      const useBracket = /[<]/.test(src);
 
       line.currentOperator = false;
       if (useOperator) {
diff --git a/tests/lib/rules/jsx-indent-props.js b/tests/lib/rules/jsx-indent-props.js
index bfa5f20d9d..adf6fd1387 100644
--- a/tests/lib/rules/jsx-indent-props.js
+++ b/tests/lib/rules/jsx-indent-props.js
@@ -195,6 +195,90 @@ ruleTester.run('jsx-indent-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: false,
+        },
+      ],
+    },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: true,
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: false,
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: true,
+        },
+      ],
+    },
     {
       code: `
         {this.props.ignoreTernaryOperatorTrue
@@ -607,5 +691,185 @@ ruleTester.run('jsx-indent-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+              id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      output: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: false,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 12,
+            type: 'space',
+            characters: 'characters',
+            gotten: 14,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+              id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      output: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: true,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 12,
+            type: 'space',
+            characters: 'characters',
+            gotten: 14,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      output: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: false,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 6,
+            type: 'tab',
+            characters: 'characters',
+            gotten: 7,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      output: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: true,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 6,
+            type: 'tab',
+            characters: 'characters',
+            gotten: 7,
+          },
+        },
+      ],
+    },
   ]),
 });