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

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