Currently, I am experiencing an issue with Angular 15 where a click event placed within a mousedown event does not trigger. Interestingly, if the position of the element is not changed using appendChild, both the mousedown and click events work as expected.
For reference, here is a simple example:
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<div (mousedown)="mousedown()">
<div (click)="inner()">
Inner
</div>
</div>
`,
})
export class App {
constructor(private readonly el: ElementRef) {}
mousedown() {
const parent = this.el.nativeElement.parentElement as HTMLElement;
parent.appendChild(this.el.nativeElement);
console.log('mousedown');
}
inner() {
console.log('click');
}
}
The goal is to manage Material cdk/overlay elements by bringing the clicked overlay to the front in a scenario where multiple overlays can be open at once and may overlap each other. The desired outcome is for clicking on an overlay to bring it to the front in the .cdk-overlay-container (essentially making it the topmost element in the container).
Is there a more effective approach to achieve this functionality, or how can the current implementation be adjusted to work properly?