Update selector view on attribute id change. Closes #5882

src/dom_components/model/Component.ts

@@ -550,7 +550,11 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
     const attrPrev = { ...this.previous('attributes') };
     const diff = shallowDiff(attrPrev, this.get('attributes')!);
-    keys(diff).forEach(pr => this.trigger(`change:attributes:${pr}`, this, diff[pr], opts));
+    keys(diff).forEach(pr => {
+      const attrKey = `attributes:${pr}`;
+      this.trigger(`change:${attrKey}`, this, diff[pr], opts);
+      this.em?.trigger(`${keyUpdate}:${attrKey}`, this, diff[pr], opts);
+    });
   }
 
   /**

src/selector_manager/view/ClassTagsView.ts

@@ -83,8 +83,9 @@ export default class ClassTagsView extends View<Selector> {
     this.em = em;
     this.componentChanged = debounce(this.componentChanged.bind(this), 0);
     this.checkSync = debounce(this.checkSync.bind(this), 0);
-    const toList = 'component:toggled component:update:classes';
-    const toListCls = 'component:update:classes change:state';
+    const evClsUp = 'component:update:classes';
+    const toList = `component:toggled ${evClsUp}`;
+    const toListCls = `${evClsUp} component:update:attributes:id change:state`;
     this.listenTo(em, toList, this.componentChanged);
     this.listenTo(em, 'styleManager:update', this.componentChanged);
     this.listenTo(em, toListCls, this.__handleStateChange);