From 4f6f47eb455ee74b9f2b74d051d41cefe57cc00c Mon Sep 17 00:00:00 2001
From: AbdullahGheith <64132433+AbdullahGheith@users.noreply.github.com>
Date: Wed, 28 Feb 2024 08:04:38 +0100
Subject: [PATCH] feat: add scrollToStart and scrollToEnd API (#7144)

Co-authored-by: w98389 <agh@spillemyndigheden.dk>
Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>
---
 .../text-area/src/vaadin-text-area-mixin.d.ts | 10 +++++++++
 .../text-area/src/vaadin-text-area-mixin.js   | 14 ++++++++++++
 packages/text-area/test/text-area.common.js   | 22 +++++++++++++++++++
 .../text-area/test/typings/text-area.types.ts |  3 +++
 4 files changed, 49 insertions(+)

diff --git a/packages/text-area/src/vaadin-text-area-mixin.d.ts b/packages/text-area/src/vaadin-text-area-mixin.d.ts
index 442ada7d99..69b62411ac 100644
--- a/packages/text-area/src/vaadin-text-area-mixin.d.ts
+++ b/packages/text-area/src/vaadin-text-area-mixin.d.ts
@@ -61,4 +61,14 @@ export declare class TextAreaMixinClass {
    * The pattern must match the entire value, not just some subset.
    */
   pattern: string;
+
+  /**
+   * Scrolls the textarea to the start if it has a vertical scrollbar.
+   */
+  scrollToStart(): void;
+
+  /**
+   * Scrolls the textarea to the end if it has a vertical scrollbar.
+   */
+  scrollToEnd(): void;
 }
diff --git a/packages/text-area/src/vaadin-text-area-mixin.js b/packages/text-area/src/vaadin-text-area-mixin.js
index 545e322967..533c0434c6 100644
--- a/packages/text-area/src/vaadin-text-area-mixin.js
+++ b/packages/text-area/src/vaadin-text-area-mixin.js
@@ -178,6 +178,20 @@ export const TextAreaMixin = (superClass) =>
       inputField.scrollTop = scrollTop;
     }
 
+    /**
+     * Scrolls the textarea to the start if it has a vertical scrollbar.
+     */
+    scrollToStart() {
+      this._inputField.scrollTop = 0;
+    }
+
+    /**
+     * Scrolls the textarea to the end if it has a vertical scrollbar.
+     */
+    scrollToEnd() {
+      this._inputField.scrollTop = this._inputField.scrollHeight;
+    }
+
     /**
      * Returns true if the current textarea value satisfies all constraints (if any).
      * @return {boolean}
diff --git a/packages/text-area/test/text-area.common.js b/packages/text-area/test/text-area.common.js
index fbe64a46a6..63afb76665 100644
--- a/packages/text-area/test/text-area.common.js
+++ b/packages/text-area/test/text-area.common.js
@@ -418,4 +418,26 @@ describe('text-area', () => {
       });
     });
   });
+
+  describe('programmatic scrolling', () => {
+    beforeEach(() => {
+      textArea.value = Array(400).join('400');
+      textArea.style.height = '300px';
+    });
+
+    it('should scroll to start', () => {
+      textArea._inputField.scrollTop = 100; // Simulate scrolling
+      textArea.scrollToStart();
+      expect(textArea._inputField.scrollTop).to.equal(0);
+    });
+
+    it('should scroll to end', () => {
+      textArea.scrollToStart();
+      expect(textArea._inputField.scrollTop).to.equal(0);
+      textArea.scrollToEnd();
+      expect(textArea._inputField.scrollTop).to.equal(
+        textArea._inputField.scrollHeight - textArea._inputField.clientHeight,
+      );
+    });
+  });
 });
diff --git a/packages/text-area/test/typings/text-area.types.ts b/packages/text-area/test/typings/text-area.types.ts
index da1cb62b9a..fabd5749b1 100644
--- a/packages/text-area/test/typings/text-area.types.ts
+++ b/packages/text-area/test/typings/text-area.types.ts
@@ -45,3 +45,6 @@ area.addEventListener('validated', (event) => {
   assertType<TextAreaValidatedEvent>(event);
   assertType<boolean>(event.detail.valid);
 });
+
+assertType<() => void>(area.scrollToStart);
+assertType<() => void>(area.scrollToEnd);