feat: add redispatch to the input based elements (#187)

* feat: add redispatch to the input based elements

* fix: remove select for checkbox and radio

---------

Co-authored-by: Sara.Parsaee <Sara.Parsaee@Tapsi.cab>

Author: saraparsa13

src/checkbox/checkbox.ts

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { redispatchEvent } from '../utils/utils';
 
 export class Checkbox extends LitElement {
   static override shadowRootOptions: ShadowRootInit = {
@@ -52,6 +53,10 @@ export class Checkbox extends LitElement {
     this.checked = state === 'true';
   }
 
+  private redispatchEvent(event: Event) {
+    redispatchEvent(this, event);
+  }
+
   render() {
     return html`
       <input
@@ -69,6 +74,7 @@ export class Checkbox extends LitElement {
         .indeterminate=${this.indeterminate}
         .checked=${this.checked}
         @input=${this.handleInput}
+        @change=${this.redispatchEvent}
       />
       ${this.renderCheckIcon()} ${this.renderIndeterminateIcon()}
     `;

src/radio/radio.ts

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { redispatchEvent } from '../utils/utils';
 
 export class Radio extends LitElement {
   static override shadowRootOptions: ShadowRootInit = {
@@ -57,6 +58,10 @@ export class Radio extends LitElement {
     this.checked = state === 'true';
   }
 
+  private redispatchEvent(event: Event) {
+    redispatchEvent(this, event);
+  }
+
   render() {
     return html`
       <input
@@ -72,6 +77,7 @@ export class Radio extends LitElement {
         ?disabled=${this.disabled}
         .checked=${this.checked}
         @input=${this.handleInput}
+        @change=${this.redispatchEvent}
       />
       ${this.renderCheckIcon()}
     `;

src/text-field/text-field.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { Input } from '../input';
+import { redispatchEvent } from '../utils/utils';
 
 export class TextField extends Input {
   @property({ type: String }) inputmode?:
@@ -41,6 +42,10 @@ export class TextField extends Input {
 
   @property({ type: String }) autocomplete?: string; // TODO: add type
 
+  private redispatchEvent(event: Event) {
+    redispatchEvent(this, event);
+  }
+
   // TODO: check if using generic ids for caption and input is ok
   protected renderInput(): TemplateResult {
     return html`
@@ -66,6 +71,8 @@ export class TextField extends Input {
         type=${this.type}
         .value=${live(this.value)}
         @input=${this.handleInput}
+        @change=${this.redispatchEvent}
+        @select=${this.redispatchEvent}
       />
       <slot part="trailing" name="trailing"></slot>
     `;

src/utils/utils.ts

@@ -9,3 +9,23 @@ export function debounce<T>(func: (...args: T[]) => void, delay: number) {
     }, delay);
   };
 }
+
+/**
+ * Re-dispatches an event from the provided element.
+ * source code: https://github.com/material-components/material-web/blob/a9ee4f5bc1d6702e5dc352eefed13a1d849577e3/internal/events/redispatch-event.ts#L28
+ */
+export function redispatchEvent(element: Element, event: Event) {
+  // For bubbling events in SSR light DOM (or composed), stop their propagation
+  // and dispatch the copy.
+  if (event.bubbles && (!element.shadowRoot || event.composed)) {
+    event.stopPropagation();
+  }
+
+  const copy = Reflect.construct(event.constructor, [event.type, event]);
+  const dispatched = element.dispatchEvent(copy);
+  if (!dispatched) {
+    event.preventDefault();
+  }
+
+  return dispatched;
+}