fix(input): correctly setting initial counter value (#2732)

Author: mfranzke

packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx

@@ -24,16 +24,16 @@ describe('db-input', () => {
     const page = await newSpecPage({
       components: [DbInput],
       html: `
-      <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_">
+      <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="10" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_">
         <option>_option1_</option>
         <option>_option2_</option>
       </db-input>
     `
     });
     expect(page.root).toEqualHtml(`
-      <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" type='text' value="_value_" variant='semitransparent'>
-        <input aria-invalid="_ariainvalid_" aria-required="true" type="text" class="elm-input" id="_input_id_" autocomplete="on" autofocus data-dirname="_dirname_" disabled list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_" aria-labelledby="_input_id_-label" data-variant='semitransparent' />
-        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label><output htmlfor="_input_id_" id="_input_id_-result">0 / 2</output>
+      <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="10" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" type='text' value="_value_" variant='semitransparent'>
+        <input aria-invalid="_ariainvalid_" aria-required="true" type="text" class="elm-input" id="_input_id_" autocomplete="on" autofocus data-dirname="_dirname_" disabled list="_list_" maxlength="10" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_" aria-labelledby="_input_id_-label" data-variant='semitransparent' />
+        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label><output htmlfor="_input_id_" id="_input_id_-result">7 / 10</output>
         <datalist id="_list_">
           <option>_option1_</option>
           <option>_option2_</option>

packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, Event, h, Host, Prop, State } from '@stencil/core';
 import { uuid } from '../../utils/utils';
 
@@ -9,6 +10,8 @@ import { uuid } from '../../utils/utils';
 export class DbInput {
   @State() valueSize = 0;
 
+  private inputElement!: HTMLInputElement;
+
   /**
    * 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.
    */
@@ -151,6 +154,10 @@ export class DbInput {
    */
   @Event() dbChange;
 
+  componentDidRender() {
+    this.valueSize = this.inputElement?.value?.length || 0;
+  }
+
   render() {
     return (
       <Host>
@@ -183,6 +190,7 @@ export class DbInput {
           onInput={(event) => {
             this.valueSize = (event.target as HTMLInputElement).value.length;
           }}
+          ref={(el) => (this.inputElement = el as HTMLInputElement)}
         />
 
         <label