diff --git a/panels/automation/ha-automation-editor.html b/panels/automation/ha-automation-editor.html
index 68d3e4b549..c47a757815 100644
--- a/panels/automation/ha-automation-editor.html
+++ b/panels/automation/ha-automation-editor.html
@@ -11,6 +11,7 @@
 <link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
 <link rel="import" href="../config/ha-config-section.html">
 
diff --git a/preact-src/json_textarea.js b/preact-src/json_textarea.js
index 324d464d71..d8b6399ed2 100644
--- a/preact-src/json_textarea.js
+++ b/preact-src/json_textarea.js
@@ -41,15 +41,16 @@ export default class JSONTextArea extends Component {
   render(props, { value, isValid }) {
     const style = {
       minWidth: 300,
+      width: '100%',
     };
     if (!isValid) {
       style.border = '1px solid red';
     }
     return (
-      <textarea
+      <iron-autogrow-textarea
         value={value}
         style={style}
-        onChange={this.onChange}
+        onValue-Changed={this.onChange}
       />
     );
   }
diff --git a/preact-src/script/call_service.js b/preact-src/script/call_service.js
index 78f5584399..bca7aca6ff 100644
--- a/preact-src/script/call_service.js
+++ b/preact-src/script/call_service.js
@@ -18,10 +18,10 @@ export default class CallServiceAction extends Component {
   }
 
   /* eslint-disable camelcase */
-  serviceDataChanged(service_data) {
+  serviceDataChanged(data) {
     this.props.onChange(this.props.index, {
       ...this.props.action,
-      service_data,
+      data,
     });
   }