diff --git a/src/components/common/controllers/resize-observer.ts b/src/components/common/controllers/resize-observer.ts index 563fce78b..4dd2d8dc5 100644 --- a/src/components/common/controllers/resize-observer.ts +++ b/src/components/common/controllers/resize-observer.ts @@ -4,14 +4,14 @@ import { isServer, } from 'lit'; -type ResizeControllerCallback = ( +type ResizeObserverControllerCallback = ( ...args: Parameters ) => 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(); 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); } diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 4c0bcb414..6f8f9711f 100644 --- a/src/components/tabs/tabs.ts +++ b/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, diff --git a/src/components/textarea/textarea.spec.ts b/src/components/textarea/textarea.spec.ts index 5cf95f7ce..2951c0ba4 100644 --- a/src/components/textarea/textarea.spec.ts +++ b/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]); }); }); diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index afc512232..005d4eff4 100644 --- a/src/components/textarea/textarea.ts +++ b/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; @@ -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); }