DOM changes execute out of order in my Angular2 component - dom

Question

I have an Angular2 component that updates an imported HTML file that I am annotating and allowing the user to edit. To do this I am updating the DOM directly using plain HTML5. On click a class is supposed to be added to the clicked DOM element. In the browser (FF and Chrome on linux) it gets added temporarily - meaning that if I print the node immediately I see the class, but after I exit the function and print it I do not. Inspect Element shows that the element is updated to <.... class> with no value when the element is clicked.
This was working when I implemented it without Angular.
I tried direct DOM manipulation (with classList.add and x.className=y), angular's Renderer, and running the code via NgZone, and all had the same effect. Can someone tell me why this is happening and what I can do to fix it?
Note: this is (supposed to be) a simple internal tool - at this point I need a quick fix (though additional advice is welcome as well).
(A few irrelevant parts of the code that are not fully implemented yet were omitted here.)
import { Component, OnInit, NgZone } from "#angular/core";
import { Http, Headers, RequestOptions } from "#angular/http";
#Component({
selector: "editor",
templateUrl: `editor/starterDemo.html`
})
export class EditorComponent implements OnInit {
ngOnInit() {
this.fixImagePaths();
this.annotate();
}
constructor(public http: Http, public zone: NgZone) { }
// constructor(public http: Http, public renderer: Renderer) { }
fixImagePaths = () => {
const els = document.querySelectorAll('img');
for (let i: number = 0, el: any; (el = els[i]); i++) {
el.src = 'editor/' + el.getAttribute('src');
}
}
annotate = () => {
document.body.addEventListener('dragover', this.drag_over);
document.body.addEventListener('click', this.selectNone);
document.body.addEventListener('keydown', this.keyDown);
const els = document.querySelectorAll('img, .box');
for (let i: number = 0, el: any; (el = els[i]); i++) {
el.draggable = true;
el.addEventListener('dragstart', this.drag_start);
el.addEventListener('click', this.selectItem);
}
}
selectItem = (event) => {
console.log("select item!");
this.selectNone();
// this.zone.run(() => {
event.target.closest('[draggable]').classList.add('dragme');
// });
// this.renderer.setElementClass(event.target.closest('[draggable]').nativeElement, 'dragme', true);
// console.log(event.target.closest('[draggable]'));
// console.log(event.target.closest('[draggable]').classList);
// console.log(event.target.closest('[draggable]').classList.contains('dragme'));
console.log(this.selected());
return false;
}
selectNone = () => {
this.selected() && this.selected().classList.remove('dragme');
}
selected = (): any => document.getElementsByClassName('dragme')[0];
}
HTML:
<div class='box'
style="background-color: white; position: absolute; top: 847px; left: 842px; z-index: 20; height: 118px; width: 351px"></div>
<img src="Screenshot1.png"
style="position: absolute; top: 0px; left: -1px" />
<img src="Screenshot2.png"
style="position: absolute; top: 913px; left: 0px; z-index: 2"/>
<img src="Screenshot3.png"
style="position: absolute; top: 1768px; left: 0px" />
<div style="height: 2000px"> </div>

Answer 1

I just figured out the problem (after hours of anguish). It seems that on linux chrome, return false is not good enough to prevent event propagation, and so the click event was running twice, once before and once after the addClass call. Since the click event has a selectNone() in the beginning (to clear the existing selected item), it ran selectNone() before and after adding the class. I added event.preventDefault(); and event.stopPropagation(); to my event handlers.
I hope this helps someone.