From f6f8427b969a1108eaee3db346c7e0f6c349af60 Mon Sep 17 00:00:00 2001
From: Mehran Poursadeghi <mehr.prs@gmail.com>
Date: Wed, 25 Dec 2024 11:51:09 +0330
Subject: [PATCH 1/6] feat: add 'dir' as an inherited attribute to textarea

---
 core/src/components/textarea/textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 3349f0c1a85..9105d9dc7cc 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -331,7 +331,7 @@ export class Textarea implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
-      ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex']),
+      ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex','dir']),
     };
   }
 

From 737082a51adcb08bb534b87f076b2bdad17db9fd Mon Sep 17 00:00:00 2001
From: Mehran Poursadeghi <mehr.prs@gmail.com>
Date: Wed, 25 Dec 2024 12:09:36 +0330
Subject: [PATCH 2/6] feat: add dir attribute to the list of inherited
 attributes of the native input

---
 core/src/components/input/input.tsx       | 2 +-
 core/src/components/textarea/textarea.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 2a9b9ec34e7..d200289904e 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -341,7 +341,7 @@ export class Input implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
-      ...inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']),
+      ...inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']),
     };
   }
 
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 9105d9dc7cc..c43f9452476 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -331,7 +331,7 @@ export class Textarea implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
-      ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex','dir']),
+      ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']),
     };
   }
 

From 5947b0f8c9e13d89aa248161e0cb97731216c350 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 13:24:48 -0700
Subject: [PATCH 3/6] refactor(input, textarea): add dir watch

---
 core/src/components/input/input.tsx       | 16 ++++++++++++++++
 core/src/components/textarea/textarea.tsx | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d200289904e..c70b2bb4009 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -338,6 +338,22 @@ export class Input implements ComponentInterface {
     }
   }
 
+  /**
+   * dir is a globally enumerated attribute.
+   * As a result, creating these as properties
+   * can have unintended side effects. Instead, we
+   * listen for attribute changes and inherit them
+   * to the inner `<input>` element.
+   */
+  @Watch('dir')
+  onDirChanged(newValue: string) {
+    this.inheritedAttributes = {
+      ...this.inheritedAttributes,
+      dir: newValue,
+    };
+    forceUpdate(this);
+  }
+
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index c43f9452476..4432c6880ed 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -261,6 +261,22 @@ export class Textarea implements ComponentInterface {
     this.runAutoGrow();
   }
 
+  /**
+   * dir is a globally enumerated attribute.
+   * As a result, creating these as properties
+   * can have unintended side effects. Instead, we
+   * listen for attribute changes and inherit them
+   * to the inner `<input>` element.
+   */
+  @Watch('dir')
+  onDirChanged(newValue: string) {
+    this.inheritedAttributes = {
+      ...this.inheritedAttributes,
+      dir: newValue,
+    };
+    forceUpdate(this);
+  }
+
   /**
    * The `ionChange` event is fired when the user modifies the textarea's value.
    * Unlike the `ionInput` event, the `ionChange` event is fired when

From 1c50bfbce47337921f092de7b228a00740ea62f7 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 13:26:32 -0700
Subject: [PATCH 4/6] docs(textarea): use correct tag

---
 core/src/components/textarea/textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 4432c6880ed..7764dfba8b5 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -266,7 +266,7 @@ export class Textarea implements ComponentInterface {
    * As a result, creating these as properties
    * can have unintended side effects. Instead, we
    * listen for attribute changes and inherit them
-   * to the inner `<input>` element.
+   * to the inner `<textarea>` element.
    */
   @Watch('dir')
   onDirChanged(newValue: string) {

From beb41fa3599abb869708505f809a2a67c2ac0040 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 13:43:58 -0700
Subject: [PATCH 5/6] test(input, textarea): verify the inheritted watch
 attribute

---
 core/src/components/input/test/input.spec.ts   | 18 ++++++++++++++++++
 .../components/textarea/test/textarea.spec.ts  | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/core/src/components/input/test/input.spec.ts b/core/src/components/input/test/input.spec.ts
index 245e7dd492f..af9faac9f3c 100644
--- a/core/src/components/input/test/input.spec.ts
+++ b/core/src/components/input/test/input.spec.ts
@@ -44,6 +44,24 @@ describe('input: rendering', () => {
     const bottomContent = page.body.querySelector('ion-input .input-bottom');
     expect(bottomContent).toBe(null);
   });
+
+  it('should inherit watched attributes', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: '<ion-input label="Input" dir="ltr"></ion-input>',
+    });
+
+    const inputEl = page.body.querySelector('ion-input')!;
+    const nativeEl = inputEl.querySelector('input')!;
+
+    expect(nativeEl.getAttribute('dir')).toBe('ltr');
+
+    inputEl.setAttribute('dir', 'rtl');
+
+    await page.waitForChanges();
+
+    expect(nativeEl.getAttribute('dir')).toBe('rtl');
+  });
 });
 
 /**
diff --git a/core/src/components/textarea/test/textarea.spec.ts b/core/src/components/textarea/test/textarea.spec.ts
index 5925a19c011..c37655af00f 100644
--- a/core/src/components/textarea/test/textarea.spec.ts
+++ b/core/src/components/textarea/test/textarea.spec.ts
@@ -14,6 +14,24 @@ it('should inherit attributes', async () => {
   expect(nativeEl.getAttribute('data-form-type')).toBe('password');
 });
 
+it('should inherit watched attributes', async () => {
+  const page = await newSpecPage({
+    components: [Textarea],
+    html: '<ion-textarea dir="ltr"></ion-textarea>',
+  });
+
+  const textareaEl = page.body.querySelector('ion-input')!;
+  const nativeEl = textareaEl.querySelector('textarea')!;
+
+  expect(nativeEl.getAttribute('dir')).toBe('ltr');
+
+  textareaEl.setAttribute('dir', 'rtl');
+
+  await page.waitForChanges();
+
+  expect(nativeEl.getAttribute('dir')).toBe('rtl');
+});
+
 /**
  * Textarea uses emulated slots, so the internal
  * behavior will not exactly match IonSelect's slots.

From 412b6829f1d42d89a7a622912485ded3117406be Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 14:04:57 -0700
Subject: [PATCH 6/6] fix(textarea): use correct tag

---
 core/src/components/textarea/test/textarea.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/textarea/test/textarea.spec.ts b/core/src/components/textarea/test/textarea.spec.ts
index c37655af00f..f1611a3e291 100644
--- a/core/src/components/textarea/test/textarea.spec.ts
+++ b/core/src/components/textarea/test/textarea.spec.ts
@@ -20,7 +20,7 @@ it('should inherit watched attributes', async () => {
     html: '<ion-textarea dir="ltr"></ion-textarea>',
   });
 
-  const textareaEl = page.body.querySelector('ion-input')!;
+  const textareaEl = page.body.querySelector('ion-textarea')!;
   const nativeEl = textareaEl.querySelector('textarea')!;
 
   expect(nativeEl.getAttribute('dir')).toBe('ltr');