fix: dispatching of events twice (#292)

* set bubbles to default

* boolean input

* input ele

* radio and radio group

* textarea

* slider

* select

Author: loivsen

packages/uui-base/lib/events/UUIEvent.ts

@@ -4,6 +4,7 @@
 
 const DefaultInit = {
   composed: true,
+  bubbles: true,
 };
 export class UUIEvent<
   DetailType extends Record<string, any> = Record<string, any>,

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -190,7 +190,8 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
     this._input.click();
   }
 
-  private _onInputChange() {
+  private _onInputChange(e: Event) {
+    e.stopPropagation();
     this.pristine = false;
     this.checked = this._input.checked;
     this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));

packages/uui-input/lib/uui-input.element.ts

@@ -281,12 +281,14 @@ export class UUIInputElement extends FormControlMixin(
   }
 
   protected onInput(e: Event) {
+    e.stopPropagation();
     this.value = (e.target as HTMLInputElement).value;
 
     this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));
   }
 
-  protected onChange() {
+  protected onChange(e: Event) {
+    e.stopPropagation();
     this.pristine = false;
     this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));
   }

packages/uui-radio/lib/uui-radio-group.element.ts

@@ -117,6 +117,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   }
 
   private _handleSlotChange(e: Event) {
+    e.stopPropagation();
     // TODO: make sure to diff new and old ones to only add and remove event listeners on relevant elements.
 
     this._radioElements?.forEach(el => {
@@ -225,6 +226,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   }
 
   private _onKeydown(e: KeyboardEvent) {
+    e.stopPropagation();
     switch (e.key) {
       case ARROW_LEFT:
       case ARROW_UP: {
@@ -264,6 +266,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   };
 
   private _handleSelectOnClick = (e: UUIRadioEvent) => {
+    e.stopPropagation();
     if (e.target.checked === true) {
       this.value = e.target.value;
       this._fireChangeEvent();

packages/uui-radio/lib/uui-radio.element.ts

@@ -220,7 +220,8 @@ export class UUIRadioElement extends LitElement {
     this.inputElement.click();
   }
 
-  private _onChange() {
+  private _onChange(e: Event) {
+    e.stopPropagation();
     const checked = this.inputElement.checked;
     this.checked = checked;
     if (checked) {

packages/uui-select/lib/uui-select.element.ts

@@ -229,6 +229,7 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
   }
 
   protected setValue(e: Event) {
+    e.stopPropagation();
     const target = e.target as HTMLSelectElement;
     if (e.target) this.value = target.value;
     this.dispatchEvent(

packages/uui-slider/lib/uui-slider.element.ts

@@ -392,12 +392,14 @@ export class UUISliderElement extends FormControlMixin(LitElement) {
     this._sliderPosition = `${Math.floor(ratio * 100000) / 1000}%`;
   }
 
-  private _onInput() {
+  private _onInput(e: Event) {
+    e.stopPropagation();
     this.value = this._input.value;
     this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));
   }
 
-  private _onChange() {
+  private _onChange(e: Event) {
+    e.stopPropagation();
     this.pristine = false;
     this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
   }

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -255,7 +255,8 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     //this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.INPUT));
   }
 
-  private onChange() {
+  private onChange(e: Event) {
+    e.stopPropagation();
     this.pristine = false;
     this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.CHANGE));
   }