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

Author: mfranzke

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