CODEWITHSUNDEEP
javascriptangular
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

How to apply FocusIn and FocusOut as a whole for the primeng tree

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

Upvotes: 0

Views: 420

Answers (1)

Yan Koshelev
Yan Koshelev

Reputation: 1129

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

Upvotes: 1

Related Questions