From b0a467d156649d71ebc7ece47cf7e70cae20bb11 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Mon, 2 Dec 2019 09:44:39 +0100
Subject: [PATCH] Use same component for form title as Gutenberg does

Ordinary textarea doesn't support automatic height detection.
[MAILPOET-2451]
---
 .../src/form_editor/components/form_title.jsx |  5 +--
 package-lock.json                             | 32 ++++++++++++++++---
 package.json                                  |  1 +
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/assets/js/src/form_editor/components/form_title.jsx b/assets/js/src/form_editor/components/form_title.jsx
index e57ea833f2..89cdb0906a 100644
--- a/assets/js/src/form_editor/components/form_title.jsx
+++ b/assets/js/src/form_editor/components/form_title.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
 import MailPoet from 'mailpoet';
+import Textarea from 'react-autosize-textarea';
 
 export default () => {
   const [isSelected, setIsSelected] = useState(false);
@@ -21,12 +22,12 @@ export default () => {
           <label htmlFor="post-title" className="screen-reader-text">
             {MailPoet.I18n.t('addFormName')}
           </label>
-          <textarea
+          <Textarea
             id="form-title"
             className="editor-post-title__input"
             placeholder={MailPoet.I18n.t('addFormName')}
             data-automation-id="form_title_input"
-            rows="1"
+            rows={1}
             onFocus={() => setIsSelected(true)}
             onKeyPress={() => setIsSelected(false)}
             onBlur={() => setIsSelected(false)}
diff --git a/package-lock.json b/package-lock.json
index bc33b20e58..d3dcf4feff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2236,6 +2236,18 @@
         "rememo": "^3.0.0",
         "tinycolor2": "^1.4.1",
         "traverse": "^0.6.6"
+      },
+      "dependencies": {
+        "react-autosize-textarea": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
+          "integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
+          "requires": {
+            "autosize": "^4.0.0",
+            "line-height": "^0.3.1",
+            "prop-types": "^15.5.6"
+          }
+        }
       }
     },
     "@wordpress/block-library": {
@@ -2506,6 +2518,18 @@
         "redux-optimist": "^1.0.0",
         "refx": "^3.0.0",
         "rememo": "^3.0.0"
+      },
+      "dependencies": {
+        "react-autosize-textarea": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
+          "integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
+          "requires": {
+            "autosize": "^4.0.0",
+            "line-height": "^0.3.1",
+            "prop-types": "^15.5.6"
+          }
+        }
       }
     },
     "@wordpress/element": {
@@ -10553,11 +10577,11 @@
       }
     },
     "react-autosize-textarea": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
-      "integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz",
+      "integrity": "sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w==",
       "requires": {
-        "autosize": "^4.0.0",
+        "autosize": "^4.0.2",
         "line-height": "^0.3.1",
         "prop-types": "^15.5.6"
       }
diff --git a/package.json b/package.json
index 74c5ba5cf9..bd90b00575 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "parsleyjs": "^2.8.1",
     "prop-types": "^15.6.2",
     "react": "^16.10.2",
+    "react-autosize-textarea": "^7.0.0",
     "react-dom": "^16.10.2",
     "react-html-parser": "^2.0.2",
     "react-router-dom": "~5.1.2",