feat: add scrollToStart and scrollToEnd API (#7144)

Co-authored-by: w98389 <[email protected]>
Co-authored-by: Sergey Vinogradov <[email protected]>

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;
 }

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}

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

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