From a22d851b1965fbb0963c9111810078e1cbf74142 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 30 Jul 2024 15:54:55 +0200 Subject: [PATCH 1/3] fix: we need to set this state initially as well --- .../src/components/db-textarea/db-textarea.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx index 50b58c9abe..75cbf666b0 100644 --- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx @@ -1,4 +1,4 @@ -import { Component, Host, h, Prop, State, Event } from '@stencil/core'; +import { Component, Host, Prop, State, Event } from '@stencil/core'; import { uuid } from '../../utils/utils'; @Component({ @@ -9,6 +9,8 @@ import { uuid } from '../../utils/utils'; export class DbTextarea { @State() valueSize = 0; + private textareaElement!: HTMLTextAreaElement; + /** * The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. */ @@ -127,6 +129,10 @@ export class DbTextarea { */ @Event() dbChange; + componentDidRender() { + this.valueSize = this.textareaElement.value.length; + } + render() { return ( @@ -156,6 +162,7 @@ export class DbTextarea { rows={this.rows} wrap={this.wrap} data-variant={this.variant} + ref={(el) => (this.textareaElement = el as HTMLTextAreaElement)} onInput={(event) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore From 749d17bf3441267e581915133b140d87f173b8e2 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 30 Jul 2024 19:45:57 +0200 Subject: [PATCH 2/3] fix: "referenceError: h is not defined" --- .../src/components/db-textarea/db-textarea.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx index 75cbf666b0..e59f038f2b 100644 --- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx @@ -1,4 +1,5 @@ -import { Component, Host, Prop, State, Event } from '@stencil/core'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, Host, h, Prop, State, Event } from '@stencil/core'; import { uuid } from '../../utils/utils'; @Component({ From 57e4d2f1213ed1bf2d8b7114a9803d28f3345c83 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 30 Jul 2024 19:50:24 +0200 Subject: [PATCH 3/3] refactor: resilience --- .../src/components/db-textarea/db-textarea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx index e59f038f2b..7a000437cb 100644 --- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx @@ -131,7 +131,7 @@ export class DbTextarea { @Event() dbChange; componentDidRender() { - this.valueSize = this.textareaElement.value.length; + this.valueSize = this.textareaElement?.value?.length || 0; } render() {