fix repeat events bug with input and textarea

src/routes/Arbor/NewPost.ts

@@ -1,3 +1,4 @@
+import type { ArxInputChangeEvent } from '@/components/General/Input';
 import { getSigner, ndk } from '@/ndk';
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
@@ -106,8 +107,8 @@ export class ArborPostCreator extends LitElement {
     }
   }
 
-  private handleContentInput(e: InputEvent) {
-    this.postContent = (e.target as HTMLTextAreaElement).value;
+  private handleContentInput(e: ArxInputChangeEvent) {
+    this.postContent = e.detail.value;
     if (this.error && this.postContent.length >= 10) {
       this.error = null;
     }
@@ -121,7 +122,7 @@ export class ArborPostCreator extends LitElement {
         <arx-textarea
           placeholder="Post. You can use Markdown here."
           .value=${this.postContent}
-          @input=${this.handleContentInput}
+          @change=${this.handleContentInput}
           ?disabled=${this.isCreating}
         ></arx-textarea>
 

src/routes/Arbor/NewTopic.ts

@@ -1,11 +1,12 @@
 import { getSigner, ndk } from '@/ndk';
+import type { ArxInputChangeEvent } from '@components/General/Input';
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import '@components/General/Button';
 import '@components/General/Input';
 import '@components/General/Textarea';
-import '@components/General/Button';
 
 @customElement('arx-arbor-topic-creator')
 export class ArborTopicCreator extends LitElement {
@@ -86,12 +87,12 @@ export class ArborTopicCreator extends LitElement {
     }
   }
 
-  private handleTopicInput(e: InputEvent) {
-    this.newTopic = (e.target as HTMLInputElement).value;
+  private handleTopicInput(e: ArxInputChangeEvent) {
+    this.newTopic = e.detail.value;
   }
 
-  private handleContentInput(e: InputEvent) {
-    this.topicContent = (e.target as HTMLTextAreaElement).value;
+  private handleContentInput(e: ArxInputChangeEvent) {
+    this.topicContent = e.detail.value;
   }
 
   override render() {
@@ -102,14 +103,14 @@ export class ArborTopicCreator extends LitElement {
         type="text"
         placeholder="New Topic"
         .value=${this.newTopic}
-        @input=${this.handleTopicInput}
+        @change=${this.handleTopicInput}
         ?disabled=${this.isCreating}
       ></arx-input>
 
       <arx-textarea
         placeholder="Topic. You can use Markdown here."
         .value=${this.topicContent}
-        @input=${this.handleContentInput}
+        @change=${this.handleContentInput}
         ?disabled=${this.isCreating}
       ></arx-textarea>
 

src/routes/Settings.ts

@@ -1,16 +1,17 @@
 import defaultAvatar from '@/default-avatar.png';
 import { getSigner, getUserProfile, ndk } from '@/ndk';
+import type { ArxInputChangeEvent } from '@components/General/Input';
 import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
-import '@components/DateTimeSettings';
-import '@components/General/Input';
-import '@components/General/Button';
-import '@components/General/Fieldset';
-import '@components/General/Card';
 import '@components/Breadcrumbs';
+import '@components/DateTimeSettings';
+import '@components/General/Button';
+import '@components/General/Card';
+import '@components/General/Fieldset';
+import '@components/General/Input';
 
 @customElement('arx-settings')
 export class EveSettings extends LitElement {
@@ -73,11 +74,10 @@ export class EveSettings extends LitElement {
     }
   }
 
-  private handleInputChange(e: Event) {
-    const target = e.target as HTMLInputElement;
+  private handleInputChange(field: string, e: ArxInputChangeEvent) {
     this.profile = {
       ...this.profile,
-      [target.name]: target.value,
+      [field]: e.detail.value,
     };
   }
 
@@ -144,7 +144,7 @@ export class EveSettings extends LitElement {
             type="text"
             name="name"
             .value=${this.profile.name}
-            @input=${this.handleInputChange}
+            @change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
             placeholder="Your display name"
           ></arx-input>
 
@@ -153,7 +153,7 @@ export class EveSettings extends LitElement {
             type="text"
             name="image"
             .value=${this.profile.picture}
-            @input=${this.handleInputChange}
+            @change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
 
@@ -162,7 +162,7 @@ export class EveSettings extends LitElement {
             type="text"
             name="banner"
             .value=${this.profile.banner}
-            @input=${this.handleInputChange}
+            @change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
         </arx-fieldset>