From 7a0e87f3081410c518ce79046dd318f52dc3f645 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 31 Jul 2024 10:01:36 +0200
Subject: [PATCH] fix(textarea): we need to set the value length state
 initially as well (#2692)

* fix: we need to set this state initially as well

* fix: "referenceError: h is not defined"

* refactor: resilience
---
 .../src/components/db-textarea/db-textarea.tsx            | 8 ++++++++
 1 file changed, 8 insertions(+)

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 50b58c9ab..7a000437c 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,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, Host, h, Prop, State, Event } from '@stencil/core';
 import { uuid } from '../../utils/utils';
 
@@ -9,6 +10,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 +130,10 @@ export class DbTextarea {
    */
   @Event() dbChange;
 
+  componentDidRender() {
+    this.valueSize = this.textareaElement?.value?.length || 0;
+  }
+
   render() {
     return (
       <Host>
@@ -156,6 +163,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