fix repeat events bug with input and textarea

src/components/General/Input.ts

@@ -1,17 +1,35 @@
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, type PropertyValues, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
+export class ArxInputChangeEvent extends CustomEvent<{ value: string }> {
+  constructor(value: string) {
+    super('change', { detail: { value } });
+  }
+}
+
 @customElement('arx-input')
 export class StyledInput extends LitElement {
   @property() placeholder = '';
   @property() value = '';
   @property({ type: Boolean }) disabled = false;
-  @property() type = 'text';
+  @property() type: 'text' | 'number' | 'password' = 'text';
   @property() name = '';
   @property({ type: Boolean }) required = false;
   @property() label = '';
 
+  @query('input') private _input!: HTMLInputElement;
+
+  @state() private _value = '';
+
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    this._value = this.value;
+  }
+
+  protected override updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('value')) this._value = this.value;
+  }
+
   static override styles = css`
     :host {
       display: inline-block;
@@ -98,7 +116,7 @@ export class StyledInput extends LitElement {
     return html`
       ${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
       <input
-        .value=${this.value}
+        .value=${this._value}
         ?disabled=${this.disabled}
         ?required=${this.required}
         placeholder=${this.placeholder}
@@ -114,52 +132,24 @@ export class StyledInput extends LitElement {
   }
 
   private _handleKeyDown(e: KeyboardEvent) {
-    this.dispatchEvent(
-      new CustomEvent('keydown', {
-        detail: { key: e.key },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this.dispatchEvent(new CustomEvent('keydown', { detail: { key: e.key }, composed: true, bubbles: true }));
   }
 
   private _handleKeyUp(e: KeyboardEvent) {
-    this.dispatchEvent(
-      new CustomEvent('keyup', {
-        detail: { key: e.key },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this.dispatchEvent(new CustomEvent('keyup', { detail: { key: e.key }, composed: true, bubbles: true }));
   }
 
   private _handleFocus() {
-    this.dispatchEvent(
-      new CustomEvent('focus', {
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this.dispatchEvent(new CustomEvent('focus', { composed: true, bubbles: true }));
   }
 
   private _handleBlur() {
-    this.dispatchEvent(
-      new CustomEvent('blur', {
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this.dispatchEvent(new CustomEvent('blur', { composed: true, bubbles: true }));
   }
 
   private _handleInput(e: InputEvent) {
-    const input = e.target as HTMLInputElement;
-    this.value = input.value;
-    this.dispatchEvent(
-      new CustomEvent('input', {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this._value = this._input.value;
+    this.dispatchEvent(new ArxInputChangeEvent(this._value));
+    e.preventDefault();
   }
 }

src/components/General/Prompt.ts

@@ -1,3 +1,4 @@
+import type { ArxInputChangeEvent } from '@components/General/Input';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -131,9 +132,8 @@ export class EvePrompt extends LitElement {
     if (e.key === 'Enter' && !e.shiftKey) this._handleSave();
   }
 
-  private _handleInputChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    this._inputValue = target.value;
+  private _handleInputChange(e: ArxInputChangeEvent) {
+    this._inputValue = e.detail.value;
   }
 
   private _handleCancel() {
@@ -166,7 +166,7 @@ export class EvePrompt extends LitElement {
                   type="text"
                   class="input-field"
                   .value=${this._inputValue}
-                  @input=${this._handleInputChange}
+                  @change=${this._handleInputChange}
                   placeholder=${this.placeholder}
                 ></arx-input>
               `

src/components/General/Textarea.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { ArxInputChangeEvent } from './Input';
 
 @customElement('arx-textarea')
 export class StyledTextarea extends LitElement {
@@ -201,12 +202,6 @@ export class StyledTextarea extends LitElement {
   private _handleInput(e: InputEvent) {
     const textarea = e.target as HTMLTextAreaElement;
     this.value = textarea.value;
-    this.dispatchEvent(
-      new CustomEvent('input', {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+    this.dispatchEvent(new ArxInputChangeEvent(this.value));
   }
 }