From 9f71d9331c1af498ca3df02b17b530966d35f352 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 16 Aug 2018 21:49:35 +0200
Subject: [PATCH] Fix automation editor safari (#1576)

* Use ha-textarea

* Lower Safari requirement to 10.3

* Lint
---
 public/__init__.py                            |  5 +--
 src/components/ha-textarea.js                 | 43 +++++++++++++++++++
 .../config/automation/ha-automation-editor.js | 26 ++++++-----
 .../config/js/condition/numeric_state.js      |  4 +-
 src/panels/config/js/condition/template.js    |  4 +-
 src/panels/config/js/json_textarea.js         |  5 +--
 src/panels/config/js/script/wait.js           |  5 ++-
 src/panels/config/js/trigger/numeric_state.js |  4 +-
 src/panels/config/js/trigger/template.js      |  4 +-
 9 files changed, 73 insertions(+), 27 deletions(-)
 create mode 100644 src/components/ha-textarea.js

diff --git a/public/__init__.py b/public/__init__.py
index 553275dfbd..50b6b4a508 100644
--- a/public/__init__.py
+++ b/public/__init__.py
@@ -22,10 +22,9 @@ def version(useragent):
     """Get the version for given user agent."""
     useragent = parse(useragent)
 
-    # on iOS every browser is a Safari which we support from version 11.
+    # on iOS every browser uses the Safari engine
     if useragent.os.family == 'iOS':
-        # Was >= 10, temp setting it to 12 to work around issue #11387
-        return useragent.os.version[0] >= 12
+        return useragent.os.version[0] >= FAMILY_MIN_VERSION['Safari']
 
     version = FAMILY_MIN_VERSION.get(useragent.browser.family)
     return version and useragent.browser.version[0] >= version
diff --git a/src/components/ha-textarea.js b/src/components/ha-textarea.js
new file mode 100644
index 0000000000..aa03fafaa4
--- /dev/null
+++ b/src/components/ha-textarea.js
@@ -0,0 +1,43 @@
+/*
+Wrapper for paper-textarea.
+
+paper-textarea crashes on iOS when created programmatically. This only impacts
+our automation and script editors as they are using Preact. Polymer is using
+template elements and does not have this issue.
+
+paper-textarea issue: https://github.com/PolymerElements/paper-input/issues/556
+WebKit issue: https://bugs.webkit.org/show_bug.cgi?id=174629
+*/
+
+import '@polymer/paper-input/paper-textarea.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+class HaTextarea extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <paper-textarea
+        label='[[label]]'
+        value='{{value}}'
+      ></paper-textarea>
+    `;
+  }
+
+  static get properties() {
+    return {
+      label: String,
+      value: {
+        type: String,
+        notify: true,
+      }
+    };
+  }
+}
+
+customElements.define('ha-textarea', HaTextarea);
+
diff --git a/src/panels/config/automation/ha-automation-editor.js b/src/panels/config/automation/ha-automation-editor.js
index 6da9a58e4d..032d8b4a30 100644
--- a/src/panels/config/automation/ha-automation-editor.js
+++ b/src/panels/config/automation/ha-automation-editor.js
@@ -239,19 +239,23 @@ class HaAutomationEditor extends
     history.back();
   }
 
-  _updateComponent() {
+  async _updateComponent() {
     if (this._renderScheduled || !this.hass || !this.config) return;
     this._renderScheduled = true;
-    Promise.resolve().then(() => {
-      this._rendered = AutomationEditor(this.$.root, {
-        automation: this.config,
-        onChange: this.configChanged,
-        isWide: this.isWide,
-        hass: this.hass,
-        localize: this.localize,
-      }, this._rendered);
-      this._renderScheduled = false;
-    });
+
+    await 0;
+
+    if (!this._renderScheduled) return;
+
+    // this._renderScheduled = false;
+
+    this._rendered = AutomationEditor(this.$.root, {
+      automation: this.config,
+      onChange: this.configChanged,
+      isWide: this.isWide,
+      hass: this.hass,
+      localize: this.localize,
+    }, this._rendered);
   }
 
   saveAutomation() {
diff --git a/src/panels/config/js/condition/numeric_state.js b/src/panels/config/js/condition/numeric_state.js
index 01ac1c891d..ad3929a701 100644
--- a/src/panels/config/js/condition/numeric_state.js
+++ b/src/panels/config/js/condition/numeric_state.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-input/paper-textarea.js';
+import '../../../../components/ha-textarea.js';
 import '../../../../components/entity/ha-entity-picker.js';
 
 import { onChangeEvent } from '../../../../common/preact/event.js';
@@ -45,7 +45,7 @@ export default class NumericStateCondition extends Component {
           value={below}
           onvalue-changed={this.onChange}
         />
-        <paper-textarea
+        <ha-textarea
           label={localize('ui.panel.config.automation.editor.conditions.type.numeric_state.value_template')}
           name="value_template"
           value={value_template}
diff --git a/src/panels/config/js/condition/template.js b/src/panels/config/js/condition/template.js
index e16392620a..11d9e30565 100644
--- a/src/panels/config/js/condition/template.js
+++ b/src/panels/config/js/condition/template.js
@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import '@polymer/paper-input/paper-textarea.js';
+import '../../../../components/ha-textarea.js';
 
 import { onChangeEvent } from '../../../../common/preact/event.js';
 
@@ -15,7 +15,7 @@ export default class TemplateCondition extends Component {
     const { value_template } = condition;
     return (
       <div>
-        <paper-textarea
+        <ha-textarea
           label={localize('ui.panel.config.automation.editor.conditions.type.template.value_template')}
           name="value_template"
           value={value_template}
diff --git a/src/panels/config/js/json_textarea.js b/src/panels/config/js/json_textarea.js
index 18552863a0..fa85cce98e 100644
--- a/src/panels/config/js/json_textarea.js
+++ b/src/panels/config/js/json_textarea.js
@@ -1,6 +1,5 @@
 import { h, Component } from 'preact';
-import '@polymer/paper-input/paper-textarea.js';
-
+import '../../../components/ha-textarea.js';
 
 export default class JSONTextArea extends Component {
   constructor(props) {
@@ -49,7 +48,7 @@ export default class JSONTextArea extends Component {
       style.border = '1px solid red';
     }
     return (
-      <paper-textarea
+      <ha-textarea
         label={label}
         value={value}
         style={style}
diff --git a/src/panels/config/js/script/wait.js b/src/panels/config/js/script/wait.js
index 849c218cee..ada2a1da3e 100644
--- a/src/panels/config/js/script/wait.js
+++ b/src/panels/config/js/script/wait.js
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-input/paper-textarea.js';
+
+import '../../../../components/ha-textarea.js';
 
 import { onChangeEvent } from '../../../../common/preact/event.js';
 
@@ -26,7 +27,7 @@ export default class WaitAction extends Component {
     const { wait_template, timeout } = action;
     return (
       <div>
-        <paper-textarea
+        <ha-textarea
           label={localize('ui.panel.config.automation.editor.actions.type.wait_template.wait_template')}
           name="wait_template"
           value={wait_template}
diff --git a/src/panels/config/js/trigger/numeric_state.js b/src/panels/config/js/trigger/numeric_state.js
index d02be63cf2..058e85d4ec 100644
--- a/src/panels/config/js/trigger/numeric_state.js
+++ b/src/panels/config/js/trigger/numeric_state.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-input/paper-textarea.js';
+import '../../../../components/ha-textarea.js';
 
 import '../../../../components/entity/ha-entity-picker.js';
 
@@ -47,7 +47,7 @@ export default class NumericStateTrigger extends Component {
           value={below}
           onvalue-changed={this.onChange}
         />
-        <paper-textarea
+        <ha-textarea
           label={localize('ui.panel.config.automation.editor.triggers.type.numeric_state.value_template')}
           name="value_template"
           value={value_template}
diff --git a/src/panels/config/js/trigger/template.js b/src/panels/config/js/trigger/template.js
index 02b9ba2fc9..dc1c908fca 100644
--- a/src/panels/config/js/trigger/template.js
+++ b/src/panels/config/js/trigger/template.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import '@polymer/paper-input/paper-textarea.js';
+import '../../../../components/ha-textarea.js';
 
 import { onChangeEvent } from '../../../../common/preact/event.js';
 
@@ -16,7 +16,7 @@ export default class TemplateTrigger extends Component {
     const { value_template } = trigger;
     return (
       <div>
-        <paper-textarea
+        <ha-textarea
           label={localize('ui.panel.config.automation.editor.triggers.type.template.value_template')}
           name="value_template"
           value={value_template}