From a048c36861231d05c4138ee644e03e6fe561f3b2 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Wed, 26 Feb 2025 00:20:57 +0300
Subject: [PATCH] ha-tabs: adapt _affectScroll() to RTL (#24018)

* adapt _affectScroll for RTL

* eslint

* import "property"

* prettier

* Update ha-tabs.ts

This makes this work...

* Lint

---------

Co-authored-by: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
---
 src/components/ha-tabs.ts | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
index d175b37748..cf0d62b7dd 100644
--- a/src/components/ha-tabs.ts
+++ b/src/components/ha-tabs.ts
@@ -20,6 +20,8 @@ export class HaTabs extends PaperTabs {
 
   private _lastLeftHiddenState = false;
 
+  private _lastRightHiddenState = false;
+
   static get template(): HTMLTemplateElement {
     if (!subTemplate) {
       subTemplate = (PaperTabs as any).template.cloneNode(true);
@@ -85,14 +87,23 @@ export class HaTabs extends PaperTabs {
     this.$.tabsContainer.scrollLeft += dx;
 
     const scrollLeft = this.$.tabsContainer.scrollLeft;
+    const dirRTL = this.dir === "rtl";
 
-    this._leftHidden = scrollLeft - this._firstTabWidth < 0;
-    this._rightHidden =
-      scrollLeft + this._lastTabWidth > this._tabContainerScrollSize;
+    const boolCondition1 = Math.abs(scrollLeft) < this._firstTabWidth;
+    const boolCondition2 =
+      Math.abs(scrollLeft) + this._lastTabWidth > this._tabContainerScrollSize;
 
-    if (this._lastLeftHiddenState !== this._leftHidden) {
-      this._lastLeftHiddenState = this._leftHidden;
-      this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
+    this._leftHidden = !dirRTL ? boolCondition1 : boolCondition2;
+    this._rightHidden = !dirRTL ? boolCondition2 : boolCondition1;
+
+    if (!dirRTL) {
+      if (this._lastLeftHiddenState !== this._leftHidden) {
+        this._lastLeftHiddenState = this._leftHidden;
+        this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
+      }
+    } else if (this._lastRightHiddenState !== this._rightHidden) {
+      this._lastRightHiddenState = this._rightHidden;
+      this.$.tabsContainer.scrollLeft -= this._rightHidden ? -23 : 23;
     }
   }
 }