refactor(textarea): Use resize observer controller (#1670)

* refactor(textarea): Use resize observer controller
* refactor: Renamed resize observer controller types

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: rkaraivanov

src/components/common/controllers/resize-observer.ts

@@ -4,14 +4,14 @@ import {
   isServer,
 } from 'lit';
 
-type ResizeControllerCallback = (
+type ResizeObserverControllerCallback = (
   ...args: Parameters<ResizeObserverCallback>
 ) => unknown;
 
 /** Configuration for initializing a resize controller. */
-export interface ResizeControllerConfig {
+export interface ResizeObserverControllerConfig {
   /** The callback function to run when a resize mutation is triggered. */
-  callback: ResizeControllerCallback;
+  callback: ResizeObserverControllerCallback;
   /** Configuration options passed to the underlying ResizeObserver. */
   options?: ResizeObserverOptions;
   /**
@@ -23,15 +23,15 @@ export interface ResizeControllerConfig {
   target?: Element | null;
 }
 
-class ResizeController implements ReactiveController {
+class ResizeObserverController implements ReactiveController {
   private readonly _host: ReactiveControllerHost & Element;
   private readonly _targets = new Set<Element>();
   private readonly _observer!: ResizeObserver;
-  private readonly _config: ResizeControllerConfig;
+  private readonly _config: ResizeObserverControllerConfig;
 
   constructor(
     host: ReactiveControllerHost & Element,
-    config: ResizeControllerConfig
+    config: ResizeObserverControllerConfig
   ) {
     this._host = host;
     this._config = config;
@@ -80,11 +80,11 @@ class ResizeController implements ReactiveController {
 
 /**
  * Creates a new resize controller bound to the given `host`
- * with {@link ResizeControllerConfig | `config`}.
+ * with {@link ResizeObserverControllerConfig | `config`}.
  */
-export function createResizeController(
+export function createResizeObserverController(
   host: ReactiveControllerHost & Element,
-  config: ResizeControllerConfig
-): ResizeController {
-  return new ResizeController(host, config);
+  config: ResizeObserverControllerConfig
+): ResizeObserverController {
+  return new ResizeObserverController(host, config);
 }

src/components/tabs/tabs.ts

@@ -22,7 +22,7 @@ import {
   type MutationControllerParams,
   createMutationController,
 } from '../common/controllers/mutation-observer.js';
-import { createResizeController } from '../common/controllers/resize-observer.js';
+import { createResizeObserverController } 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';
@@ -86,7 +86,7 @@ export default class IgcTabsComponent extends EventEmitterMixin<
 
   //#region Private state & properties
 
-  private readonly _resizeController = createResizeController(this, {
+  private readonly _resizeController = createResizeObserverController(this, {
     callback: this._resizeCallback,
     options: { box: 'border-box' },
     target: null,

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 { createResizeObserverController } 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();
 
+    createResizeObserverController(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);
   }