Fix automation editor safari (#1576)

* Use ha-textarea

* Lower Safari requirement to 10.3

* Lint

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

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);
+

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() {

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}

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}

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}

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}

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}

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}