title: How to set PrimeNg Table row as activeElement of the document
body: <p>I am working on a project to create custom keyboard navigation to PrimeNg's table component. Their keyboard navigation is not robust enough for us. The problem is getting the document.activeElement to be the current row I am on. It always seems to be the body of the document as the activeElement instead of the row I focus. </p>
  
  <p>I honestly and clueless at this point on what to even try. Here's the code I am attempting to get to work. This happens in both Angular 5 and newer version, Angular 7. </p>
  
  <pre><code>    onRowClick(el: HTMLElement) {
          el.removeEventListener("focusout", this.unFocusRow);
          const prevElements = document.getElementsByClassName("row-focused");
          for (let i = 0; i &lt; prevElements.length; i++) {
              prevElements.item(i).classList.remove("row-focused");
          }
          el.classList.add("row-focused");
          el.focus();
          console.log(document.activeElement); // this should be "el" since we focused it
          el.addEventListener("focusout", this.unFocusRow);
      }
  
      unFocusRow() {
          const prevElements = document.getElementsByClassName("row-focused");
          if (prevElements.length &gt; 0) {
              for (let i = 0; i &lt; prevElements.length; i++) {
                  prevElements.item(i).classList.remove("row-focused");
              }
          }
      }
  </code></pre>
  
  <p>I am expecting the console.log to be the value of el, which is the row I clicked on. The el.focus() does not seem to be registering that as the activeElement. The actual console.log is the body of the document, not that row. </p>
  
  <p>I created a stackblitz to demonstrate this. <a href="https://stackblitz.com/edit/ang5-hostlistener" rel="nofollow noreferrer">https://stackblitz.com/edit/ang5-hostlistener</a>
  The stackblitz is for Angular 5, but the same behavior occurs in Angular 7.</p>
  
  <p>Thanks in advance for any help.</p>