web/elements: hidden secrets not propagating

web/src/components/ak-secret-text-input.ts

@@ -10,7 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-secret-text-input")
 export class AkSecretTextInput extends HorizontalLightComponent<string> {
-    @property({ type: String, reflect: true })
+    @property({ type: String })
     public value = "";
 
     @property({ type: Boolean, reflect: true })
@@ -19,10 +19,20 @@ export class AkSecretTextInput extends HorizontalLightComponent<string> {
     @property({ type: String })
     public placeholder = "";
 
+    @property({ type: Number, attribute: "maxlength" })
+    public maxLength?: number;
+
+    @property({ type: Number, attribute: "minlength" })
+    public minLength?: number;
+
     #onReveal() {
         this.revealed = true;
     }
 
+    #inputListener = (ev: InputEvent) => {
+        this.value = (ev.target as HTMLInputElement).value;
+    };
+
     #renderSecretInput() {
         return html`<div class="pf-c-form__horizontal-group" @click=${() => this.#onReveal()}>
             <input
@@ -32,26 +42,32 @@ export class AkSecretTextInput extends HorizontalLightComponent<string> {
                 data-form-ignore="true"
                 value="**************"
             />
-            <input type="text" value="${ifDefined(this.value)}" ?required=${this.required} hidden />
+            <input
+                type="text"
+                value="${ifDefined(this.value)}"
+                ?required=${this.required}
+                name=${ifDefined(this.name)}
+                hidden
+            />
             <p class="pf-c-form__helper-text" aria-live="polite">${msg("Click to change value")}</p>
         </div>`;
     }
 
     protected renderVisibleInput() {
         const code = this.inputHint === "code";
-        const setValue = (ev: InputEvent) => {
-            this.value = (ev.target as HTMLInputElement).value;
-        };
         const classes = {
             "pf-c-form-control": true,
             "pf-m-monospace": code,
         };
 
         return html` <input
             type="text"
-            @input=${setValue}
+            @input=${this.#inputListener}
+            name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
             class="${classMap(classes)}"
+            maxlength=${ifPresent(this.maxLength)}
+            minlength=${ifPresent(this.minLength)}
             placeholder=${ifPresent(this.placeholder)}
             autocomplete=${ifDefined(code ? "off" : undefined)}
             spellcheck=${ifDefined(code ? "false" : undefined)}