From b444de84422fd635209fc79f67b536051cea6fee Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Mon, 12 Dec 2022 15:52:00 +0100 Subject: [PATCH] fix(angular): only listen to host balChanges --- .../src/directives/boolean-value-accessor.ts | 2 +- .../src/directives/checkbox-value-accessor.ts | 2 +- .../src/directives/number-value-accessor.ts | 2 +- .../src/directives/select-value-accessor.ts | 2 +- .../src/directives/text-value-accessor.ts | 2 +- .../src/directives/value-accessor.ts | 12 ++++-- .../components/form/bal-input/bal-input.tsx | 9 +++- .../form/bal-radio/test/bal-radio.cy.html | 41 ++++++++++++------- .../boolean-value-accessor.ts | 2 +- .../checkbox-value-accessor.ts | 2 +- .../number-value-accessor.ts | 2 +- .../radio-value-accessor.ts | 2 +- .../select-value-accessor.ts | 2 +- .../text-value-accessor.ts | 2 +- .../control-value-accessors/value-accessor.ts | 12 ++++-- 15 files changed, 61 insertions(+), 35 deletions(-) diff --git a/packages/components-angular/src/directives/boolean-value-accessor.ts b/packages/components-angular/src/directives/boolean-value-accessor.ts index bedc9c8eea..5081d4f81b 100644 --- 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)', + '()': '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 index 69e89dc680..606b85b11e 100644 --- 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)', + '()': '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 index cbc64de7ad..362366ee38 100644 --- 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)', + '()': '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 index 57a1f3312b..35c0a16e17 100644 --- 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)', + '()': '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 index 43c7b45fd4..10961361de 100644 --- 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)', + '()': 'handleChangeEvent($event)', }, providers: [ { diff --git a/packages/components-angular/src/directives/value-accessor.ts b/packages/components-angular/src/directives/value-accessor.ts index ca75842772..6c359ba9a8 100644 --- 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) { + 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 index 7fd918cf86..100f35c959 100644 --- a/packages/components/src/components/form/bal-input/bal-input.tsx +++ b/packages/components/src/components/form/bal-input/bal-input.tsx @@ -40,6 +40,7 @@ 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', @@ -47,10 +48,16 @@ import { BEM } from '../../../utils/bem' css: 'bal-input.sass', }, }) -export class Input implements ComponentInterface, FormInput { +export class Input implements ComponentInterface, FormInput, 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 index 5f25ef7395..d420c6ffdf 100644 --- 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 @@ - - - - - - - - - -
- Basic + + + + + + + + + + +
+ + Combi +
+ + Label TRUE + + Label FALSE + + +
+
+ + + 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 index 985ea9d087..ecb82b1d55 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index 19e7da045b..853c169429 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index a342da3fab..2dcab43582 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index 8155b024f2..563a44406b 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index 7fc0888123..f7deba9c87 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index 8364b62305..294d7119d8 100644 --- 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: '', host: { - '()': 'handleChangeEvent($event.detail)', + '()': '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 index ca75842772..6c359ba9a8 100644 --- 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) { + 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) + } } }