Scenario: I have a primeng tree inside a div component. So when I click any of the tree nodes, then focusin should be triggered once (even if I click another node, shouldn't trigger focusin because it's already clicked inside the div)and only when I click outside of the tree node's div should trigger the focusout.
What's Happening: Whenever I click the node, focusin is triggered and if I click another node inside the same tree, then focusout is triggered first and focusin is triggered next.
Here is the code:
.html
<div (focusin)="onFocusIn()" (focusout)="onFocusOut()">
<p-tree [value]="files1"></p-tree>
</div>
.ts
onFocusIn() {
console.log('Focus In');
}
onFocusOut() {
console.log('Focus Out');
}
Here is the stackblitz link
You can merge two events and get last of focus operation, this is will be an action what you need:
const focusOut = fromEvent(this.divRef.nativeElement, 'focusout');
const focusIn = fromEvent(this.divRef.nativeElement, 'focusin');
merge(focusOut, focusIn)
.pipe(debounceTime(0))
.subscribe((e: any) => {
if (e?.type === 'focusin') {
this.onFocusIn();
} else {
this.onFocusOut();
}
});
Also an example with working code, hope this helps. Stackblitz