From c401b44bbf0bbf57e1f88fed9bb88fd492d50695 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 11 Dec 2017 19:37:08 -0500
Subject: [PATCH] Create custom autosize textarea component

Replaces autosize, which presently has scroll issues in iOS 11. See: https://github.com/jackmoore/autosize/issues/343
---
 package-lock.json                            |  5 ---
 package.json                                 |  1 -
 src/assets/stylesheets/main.scss             |  1 +
 src/components/autosize-textarea/_style.scss |  3 ++
 src/components/autosize-textarea/index.js    | 39 ++++++++++++++++++++
 src/components/done-input/textarea.js        | 35 +++++-------------
 webpack.config.js                            |  1 -
 7 files changed, 53 insertions(+), 32 deletions(-)
 create mode 100644 src/components/autosize-textarea/_style.scss
 create mode 100644 src/components/autosize-textarea/index.js

diff --git a/package-lock.json b/package-lock.json
index 5ae764868..50cb6937c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -449,11 +449,6 @@
         }
       }
     },
-    "autosize": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.0.tgz",
-      "integrity": "sha1-egWZsbqE1zvXWJsNnaOHAVLGkjc="
-    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
diff --git a/package.json b/package.json
index 0dde438a4..4c3a8fe0e 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,6 @@
     "webpack": "3.8.1"
   },
   "dependencies": {
-    "autosize": "4.0.0",
     "classcat": "1.0.1",
     "date-fns": "1.28.5",
     "fast-stable-stringify": "1.0.0",
diff --git a/src/assets/stylesheets/main.scss b/src/assets/stylesheets/main.scss
index 6aa7088b0..c8b1dd5a6 100755
--- a/src/assets/stylesheets/main.scss
+++ b/src/assets/stylesheets/main.scss
@@ -12,6 +12,7 @@
 @import 'elements';
 
 // Components
+@import '~components/autosize-textarea/style';
 @import '~components/button/style';
 @import '~components/button-group/style';
 @import '~components/card/style';
diff --git a/src/components/autosize-textarea/_style.scss b/src/components/autosize-textarea/_style.scss
new file mode 100644
index 000000000..822a49029
--- /dev/null
+++ b/src/components/autosize-textarea/_style.scss
@@ -0,0 +1,3 @@
+.autosize-textarea {
+	overflow-y: hidden;
+}
diff --git a/src/components/autosize-textarea/index.js b/src/components/autosize-textarea/index.js
new file mode 100644
index 000000000..f310ffa95
--- /dev/null
+++ b/src/components/autosize-textarea/index.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { Component, createElement } from 'preact';
+import classcat from 'classcat';
+
+export default class AutosizeTextarea extends Component {
+	componentDidMount() {
+		this.resize();
+	}
+
+	resize = () => {
+		const { base } = this;
+		base.style.height = '0';
+		base.style.height = base.scrollHeight + 'px';
+	};
+
+	onInput = ( event ) => {
+		this.resize();
+
+		// Preserve original prop handler behavior
+		const { onInput } = this.props;
+		if ( onInput ) {
+			onInput( event );
+		}
+	};
+
+	render() {
+		const { className } = this.props;
+		const classes = classcat( [ 'autosize-textarea', className ] );
+
+		return (
+			<textarea
+				{ ...this.props }
+				onInput={ this.onInput }
+				className={ classes } />
+		);
+	}
+}
diff --git a/src/components/done-input/textarea.js b/src/components/done-input/textarea.js
index 2c1b749ed..bb8208360 100644
--- a/src/components/done-input/textarea.js
+++ b/src/components/done-input/textarea.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { createElement, Component } from 'preact';
-import autosize from 'autosize';
 import caret from 'textarea-caret';
 
 /**
  * Internal dependencies
  */
 import { translate } from 'lib/i18n';
+import AutosizeTextarea from 'components/autosize-textarea';
 import PopoverMenu from 'components/popover-menu';
 
 export default class DoneInputTextarea extends Component {
@@ -21,39 +21,24 @@ export default class DoneInputTextarea extends Component {
 		const { autoFocus, selectionOffset } = this.props;
 
 		if ( autoFocus ) {
-			this.textarea.focus();
+			this.textarea.base.focus();
 		}
 
 		if ( selectionOffset ) {
 			const [ start, stop ] = selectionOffset;
-			this.textarea.setSelectionRange( start, stop );
+			this.textarea.base.setSelectionRange( start, stop );
 		}
-
-		autosize( this.textarea );
-	}
-
-	componentWillUnmount() {
-		autosize.destroy( this.textarea );
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { value, selectionOffset } = this.props;
-
-		if ( value !== prevProps.value ) {
-			this.resize();
-		}
-
+		const { selectionOffset } = this.props;
 		if ( selectionOffset && selectionOffset !== prevProps.selectionOffset ) {
 			const [ start, stop ] = selectionOffset;
-			this.textarea.setSelectionRange( start, stop );
+			this.textarea.base.setSelectionRange( start, stop );
 		}
 	}
 
-	resize() {
-		autosize.update( this.textarea );
-	}
-
-	setRef = ( textarea ) => this.textarea = textarea;
+	bindTextarea = ( textarea ) => this.textarea = textarea;
 
 	setCaretOffset = ( event ) => {
 		// Calculate caret offset for use in positioning suggestions menu
@@ -73,10 +58,10 @@ export default class DoneInputTextarea extends Component {
 
 	onSelectSuggestion = ( suggestion ) => {
 		// Insert suggestion at current caret index
-		this.props.onSuggestionSelected( suggestion, this.textarea.selectionStart );
+		this.props.onSuggestionSelected( suggestion, this.textarea.base.selectionStart );
 
 		// If suggestion inserted via click on PopoverMenu, preserve focus
-		setTimeout( () => this.textarea && this.textarea.focus() );
+		setTimeout( () => this.textarea.base && this.textarea.base.focus() );
 	};
 
 	render() {
@@ -85,8 +70,8 @@ export default class DoneInputTextarea extends Component {
 
 		return (
 			<div className="done-input__textarea">
-				<textarea
-					ref={ this.setRef }
+				<AutosizeTextarea
+					ref={ this.bindTextarea }
 					value={ value }
 					onKeyDown={ onKeyDown }
 					rows="1"
diff --git a/webpack.config.js b/webpack.config.js
index 3f3e40e4a..3256793e1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,6 @@ const config = module.exports = {
 			'./src/index.js',
 		],
 		vendor: [
-			'autosize',
 			'classcat',
 			'fast-stable-stringify',
 			'flatpickr',