From 807dff99afe6bec728d31adb95d53f326515bfb8 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Mon, 12 Aug 2019 20:31:23 +0300
Subject: [PATCH] RTL arrow problems (#3467)

* Updated style check since load sequence must have changed

* Refactored to timeout

* Added comment
---
 src/components/ha-icon-next.ts                | 14 +++++++-----
 src/components/ha-icon-prev.ts                | 14 +++++++-----
 .../ha-paper-icon-button-arrow-next.ts        | 14 +++++++-----
 .../ha-paper-icon-button-arrow-prev.ts        | 22 ++++++++++---------
 src/components/ha-paper-icon-button-next.ts   | 14 +++++++-----
 src/components/ha-paper-icon-button-prev.ts   | 14 +++++++-----
 6 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts
index d6a16bc7bb..7a875d5e61 100644
--- a/src/components/ha-icon-next.ts
+++ b/src/components/ha-icon-next.ts
@@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
 
 export class HaIconNext extends HaIcon {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-right"
-        : "hass:chevron-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-right"
+          : "hass:chevron-left";
+    }, 100);
   }
 }
 
diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts
index 8fa3c030e8..e8d58433e6 100644
--- a/src/components/ha-icon-prev.ts
+++ b/src/components/ha-icon-prev.ts
@@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
 
 export class HaIconPrev extends HaIcon {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-left"
-        : "hass:chevron-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-left"
+          : "hass:chevron-right";
+    }, 100);
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-arrow-next.ts b/src/components/ha-paper-icon-button-arrow-next.ts
index 8d0914a0cb..6bf526ec2e 100644
--- a/src/components/ha-paper-icon-button-arrow-next.ts
+++ b/src/components/ha-paper-icon-button-arrow-next.ts
@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:arrow-right"
-        : "hass:arrow-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:arrow-right"
+          : "hass:arrow-left";
+    }, 100);
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-arrow-prev.ts b/src/components/ha-paper-icon-button-arrow-prev.ts
index de512993f8..dd6378acad 100644
--- a/src/components/ha-paper-icon-button-arrow-prev.ts
+++ b/src/components/ha-paper-icon-button-arrow-prev.ts
@@ -12,17 +12,19 @@ export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
   public hassio?: boolean;
 
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? this.hassio
-          ? "hassio:arrow-left"
-          : "hass:arrow-left"
-        : this.hassio
-        ? "hassio:arrow-right"
-        : "hass:arrow-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? this.hassio
+            ? "hassio:arrow-left"
+            : "hass:arrow-left"
+          : this.hassio
+          ? "hassio:arrow-right"
+          : "hass:arrow-right";
+    }, 100);
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-next.ts b/src/components/ha-paper-icon-button-next.ts
index 5a137fc2d3..e3038e5a00 100644
--- a/src/components/ha-paper-icon-button-next.ts
+++ b/src/components/ha-paper-icon-button-next.ts
@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonNext extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-right"
-        : "hass:chevron-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-right"
+          : "hass:chevron-left";
+    }, 100);
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-prev.ts b/src/components/ha-paper-icon-button-prev.ts
index 06479fcd1f..396482be4b 100644
--- a/src/components/ha-paper-icon-button-prev.ts
+++ b/src/components/ha-paper-icon-button-prev.ts
@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonPrev extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-left"
-        : "hass:chevron-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-left"
+          : "hass:chevron-right";
+    }, 100);
   }
 }