From 237547e345e452b9ecd56048256e5df5365e3377 Mon Sep 17 00:00:00 2001
From: Moong0122 <venture1031@naver.com>
Date: Wed, 14 Oct 2020 01:29:51 +0900
Subject: [PATCH] [Fix] `jsx-indent-props`: Apply indentation when using
 brackets

Per https://github.com/yannickcr/eslint-plugin-react/pull/2808#issuecomment-707166159
---
 CHANGELOG.md                        |  5 +++++
 lib/rules/jsx-indent-props.js       |  4 ++++
 tests/lib/rules/jsx-indent-props.js | 17 +++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c1920235e..f28f2a308f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ## Unreleased
 
+### Fixed
+* [`jsx-indent-props`]: Apply indentation when using brackets ([#2826][] @Moong0122)
+
+[#2826]: https://github.com/yannickcr/eslint-plugin-react/issues/2826
+
 ## [7.21.4] - 2020.10.09
 
 ### Fixed
diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js
index 7a07cca283..b2c08cec83 100644
--- a/lib/rules/jsx-indent-props.js
+++ b/lib/rules/jsx-indent-props.js
@@ -124,10 +124,14 @@ module.exports = {
 
       const indent = regExp.exec(src);
       const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);
+      const useBracket = /^([ ]|[\t])*[<]/.test(src);
+
       line.currentOperator = false;
       if (useOperator) {
         line.isUsingOperator = true;
         line.currentOperator = true;
+      } else if (useBracket) {
+        line.isUsingOperator = false;
       }
 
       return indent ? indent[0].length : 0;
diff --git a/tests/lib/rules/jsx-indent-props.js b/tests/lib/rules/jsx-indent-props.js
index cc037fa39b..67e4b1223e 100644
--- a/tests/lib/rules/jsx-indent-props.js
+++ b/tests/lib/rules/jsx-indent-props.js
@@ -38,6 +38,23 @@ ruleTester.run('jsx-indent-props', rule, {
       '/>'
     ].join('\n'),
     options: [2]
+  }, {
+    code: [
+      'const Test = () => ([',
+      '  (x',
+      '    ? <div key="1" />',
+      '    : <div key="2" />),',
+      '  <div',
+      '    key="3"',
+      '    align="left"',
+      '  />,',
+      '  <div',
+      '    key="4"',
+      '    align="left"',
+      '  />,',
+      ']);'
+    ].join('\n'),
+    options: [2]
   }, {
     code: [
       '<App',