diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index 66f843ab7a..377903f5fa 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -55,8 +55,11 @@ import { ComponentDynamicValueListener } from './ComponentDynamicValueListener'; import { DynamicValueWatcher } from './DynamicValueWatcher'; export interface IComponent extends ExtractMethods { } - -export interface SetAttrOptions extends SetOptions, UpdateStyleOptions { } +export interface DynamicWatchersOptions { + updateDynamicWatchers?: boolean; +} +export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions { } +export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions { } const escapeRegExp = (str: string) => { return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); @@ -334,17 +337,17 @@ export default class Component extends StyleableModel { } } - set(attributeName: A, value?: ComponentProperties[A], options?: SetOptions): this; - set(attributeName: Partial, options?: SetOptions): this; + set(attributeName: A, value?: ComponentProperties[A], options?: ComponentSetOptions): this; + set(attributeName: Partial, options?: ComponentSetOptions): this; set( attributeName: Partial | A, value?: SetOptions | ComponentProperties[A], - options?: SetOptions, + options?: ComponentSetOptions, ): this; set( attributeName: Partial | A, value?: SetOptions | ComponentProperties[A], - options?: SetOptions, + options: ComponentSetOptions = { updateDynamicWatchers: true }, ): this { const props = typeof attributeName === 'object' @@ -356,7 +359,9 @@ export default class Component extends StyleableModel { const evaluatedProps = areStaticAttributes ? props : ComponentDynamicValueListener.evaluateComponentDef(props, this.em); - this.componentDVListener?.watchProps(props); + if (options.updateDynamicWatchers) { + this.componentDVListener?.watchProps(props); + } return super.set(evaluatedProps, options); } @@ -678,10 +683,12 @@ export default class Component extends StyleableModel { * @example * component.setAttributes({ id: 'test', 'data-key': 'value' }); */ - setAttributes(attrs: ObjectAny, opts: SetAttrOptions = {}) { + setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { updateDynamicWatchers: true }) { const areStaticAttributes = DynamicValueWatcher.areStaticValues(attrs); const evaluatedAttributes = areStaticAttributes ? attrs : DynamicValueWatcher.getStaticValues(attrs, this.em); - this.componentDVListener.setAttributes(attrs); + if (opts.updateDynamicWatchers) { + this.componentDVListener.setAttributes(attrs); + } this.set('attributes', { ...evaluatedAttributes }, opts); return this; diff --git a/packages/core/src/dom_components/model/ComponentDynamicValueListener.ts b/packages/core/src/dom_components/model/ComponentDynamicValueListener.ts index f02403f2a4..80a25658eb 100644 --- a/packages/core/src/dom_components/model/ComponentDynamicValueListener.ts +++ b/packages/core/src/dom_components/model/ComponentDynamicValueListener.ts @@ -13,11 +13,11 @@ export class ComponentDynamicValueListener { em: EditorModel, ) { this.propertyWatchClass = new DynamicValueWatcher((key: string, value: any) => { - this.component.set(key, value); + this.component.set(key, value, { updateDynamicWatchers: false }); }, em); this.attributeWatchClass = new DynamicValueWatcher((key: string, value: any) => { - this.component.setAttributes({ [key]: value }); + this.component.setAttributes({ [key]: value }, { updateDynamicWatchers: false }); }, em); this.traitsWatchClass = new DynamicValueWatcher((key: string, value: any) => {