refactor(textarea): Use resize observer controller

Author: rkaraivanov

src/components/textarea/textarea.spec.ts

@@ -16,7 +16,6 @@ import {
   isFocused,
   runValidationContainerTests,
   simulateInput,
-  simulateScroll,
 } from '../common/utils.spec.js';
 import IgcTextareaComponent from './textarea.js';
 
@@ -209,17 +208,20 @@ describe('Textarea component', () => {
       element.appendChild(text);
       await elementUpdated(element);
 
-      await simulateScroll(element, { top: yDelta, left: xDelta });
+      element.scrollTo({ top: yDelta, left: xDelta });
       expect([textArea.scrollLeft, textArea.scrollTop]).to.eql([
         xDelta,
         yDelta,
       ]);
 
-      await simulateScroll(element, { top: yDelta * 2, left: xDelta * 2 });
+      element.scrollTo({ top: yDelta * 2, left: xDelta * 2 });
       expect([textArea.scrollLeft, textArea.scrollTop]).to.eql([
         xDelta * 2,
         yDelta * 2,
       ]);
+
+      element.scrollTo(0, 0);
+      expect([textArea.scrollLeft, textArea.scrollTop]).to.eql([0, 0]);
     });
   });
 

src/components/textarea/textarea.ts

@@ -10,6 +10,7 @@ import { live } from 'lit/directives/live.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
+import { createResizeController } from '../common/controllers/resize-observer.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
@@ -83,7 +84,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcTextareaComponent, IgcValidationContainerComponent);
   }
 
@@ -102,8 +103,6 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
 
   protected inputId = `textarea-${IgcTextareaComponent.increment()}`;
 
-  private observer!: ResizeObserver;
-
   @queryAssignedNodes({ flatten: true })
   private projected!: Array<Node>;
 
@@ -298,29 +297,18 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   constructor() {
     super();
 
+    createResizeController(this, {
+      callback: this.setAreaHeight,
+    });
+
     this._formValue = createFormValueState(this, { initialValue: '' });
 
     this.addEventListener('focus', this.handleFocus);
     this.addEventListener('blur', this.handleBlur);
   }
 
-  public override async connectedCallback() {
-    super.connectedCallback();
-
-    await this.updateComplete;
-
-    this.setAreaHeight();
-    this.observer = new ResizeObserver(() => this.setAreaHeight());
-    this.observer.observe(this.input);
-  }
-
-  public override disconnectedCallback(): void {
-    this.observer.disconnect();
-    super.disconnectedCallback();
-  }
-
   /** Selects all text within the control. */
-  public select() {
+  public select(): void {
     this.input.select();
   }
 
@@ -329,7 +317,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     start: number,
     end: number,
     direction: SelectionRangeDirection = 'none'
-  ) {
+  ): void {
     this.input.setSelectionRange(start, end, direction);
   }
 
@@ -339,7 +327,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     start: number,
     end: number,
     selectMode: RangeTextSelectMode = 'preserve'
-  ) {
+  ): void {
     this.input.setRangeText(replacement, start, end, selectMode);
     this.value = this.input.value;
   }
@@ -349,7 +337,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   /* blazorSuppress */
   public override scrollTo(x: number, y: number): void;
   public override scrollTo(x?: unknown, y?: unknown): void {
-    x !== undefined && y !== undefined
+    x != null && y != null
       ? this.input.scrollTo(x as number, y as number)
       : this.input.scrollTo(x as ScrollToOptions);
   }