fix(angular): only listen to host balChanges

baloise · Dec 12, 2022 · b444de8 · b444de8
1 parent 5e064e1
commit b444de8
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 35 deletions.
diff --git a/packages/components-angular/src/directives/boolean-value-accessor.ts b/packages/components-angular/src/directives/boolean-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: 'bal-popover, bal-accordion',
   host: {
-    '(balChange)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/components-angular/src/directives/checkbox-value-accessor.ts b/packages/components-angular/src/directives/checkbox-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: 'bal-checkbox',
   host: {
-    '(balChange)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/components-angular/src/directives/number-value-accessor.ts b/packages/components-angular/src/directives/number-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: 'bal-number-input, bal-input-stepper',
   host: {
-    '(balInput)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/components-angular/src/directives/select-value-accessor.ts b/packages/components-angular/src/directives/select-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: 'bal-radio-group, bal-checkbox-group, bal-select, bal-datepicker, bal-tabs',
   host: {
-    '(balChange)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/components-angular/src/directives/text-value-accessor.ts b/packages/components-angular/src/directives/text-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: 'bal-input, bal-textarea, bal-input-slider',
   host: {
-    '(balInput)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/components-angular/src/directives/value-accessor.ts b/packages/components-angular/src/directives/value-accessor.ts
@@ -19,10 +19,14 @@ export class ValueAccessor implements ControlValueAccessor {
     this.el.nativeElement.value = this.lastValue = value == null ? '' : value
   }
 
-  handleChangeEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value
-      this.onChange(value)
+  handleChangeEvent(event: CustomEvent<any>) {
+    console.log('handleChangeEvent', this.el.nativeElement, this.el.nativeElement === event.target, event)
+    if (this.el.nativeElement === event.target) {
+      const value = event.detail
+      if (value !== this.lastValue) {
+        this.lastValue = value
+        this.onChange(value)
+      }
     }
   }
 

diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -40,17 +40,24 @@ import {
 import isNil from 'lodash.isnil'
 import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from '../../../utils/constants/keys.constant'
 import { BEM } from '../../../utils/bem'
+import { Loggable, Logger, LogInstance } from '../../../utils/log'
 
 @Component({
   tag: 'bal-input',
   styleUrls: {
     css: 'bal-input.sass',
   },
 })
-export class Input implements ComponentInterface, FormInput<string | undefined> {
+export class Input implements ComponentInterface, FormInput<string | undefined>, Loggable {
   private inputId = `bal-input-${InputIds++}`
   private inheritedAttributes: { [k: string]: any } = {}
 
+  log!: LogInstance
+  @Logger('bal-input')
+  createLogger(log: LogInstance) {
+    this.log = log
+  }
+
   nativeInput?: HTMLInputElement
   inputValue = this.value
   initialValue = this.value || ''

diff --git a/packages/components/src/components/form/bal-radio/test/bal-radio.cy.html b/packages/components/src/components/form/bal-radio/test/bal-radio.cy.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
 
-  <body>
-    <bal-doc-app>
-      <main class="container">
-        <bal-heading>Basic</bal-heading>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <script type="module" src="/build/design-system-components.esm.js"></script>
+  <script nomodule src="/build/design-system-components.js"></script>
+</head>
+
+<body>
+  <bal-doc-app>
+    <main class="container">
+      <!-- <bal-heading>Basic</bal-heading>
         <section>
           <bal-radio-group data-testid="basic" value="1">
             <bal-radio value="1">Label 1</bal-radio>
@@ -49,8 +50,18 @@
             <bal-radio value="3">Label 3</bal-radio>
             <bal-radio value="4" disabled>Label Disabled</bal-radio>
           </bal-radio-group>
-        </section>
-      </main>
-    </bal-doc-app>
-  </body>
+        </section> -->
+      <bal-heading>Combi</bal-heading>
+      <section>
+        <bal-radio-group data-testid="combi" value="true" vertical>
+          <bal-radio value="true">Label TRUE</bal-radio>
+          <bal-input placeholder="Placeholder"></bal-input>
+          <bal-radio value="false">Label FALSE</bal-radio>
+          <bal-input placeholder="Placeholder"></bal-input>
+        </bal-radio-group>
+      </section>
+    </main>
+  </bal-doc-app>
+</body>
+
 </html>
diff --git a/packages/output-targets/angular/resources/control-value-accessors/boolean-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/boolean-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/checkbox-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/checkbox-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/number-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/number-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/radio-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/radio-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/select-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/select-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/text-value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/text-value-accessor.ts
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor'
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event)',
   },
   providers: [
     {

diff --git a/packages/output-targets/angular/resources/control-value-accessors/value-accessor.ts b/packages/output-targets/angular/resources/control-value-accessors/value-accessor.ts
@@ -19,10 +19,14 @@ export class ValueAccessor implements ControlValueAccessor {
     this.el.nativeElement.value = this.lastValue = value == null ? '' : value
   }
 
-  handleChangeEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value
-      this.onChange(value)
+  handleChangeEvent(event: CustomEvent<any>) {
+    console.log('handleChangeEvent', this.el.nativeElement, this.el.nativeElement === event.target, event)
+    if (this.el.nativeElement === event.target) {
+      const value = event.detail
+      if (value !== this.lastValue) {
+        this.lastValue = value
+        this.onChange(value)
+      }
     }
   }