0

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.

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. 

    onRowClick(el: HTMLElement) {
        el.removeEventListener("focusout", this.unFocusRow);
        const prevElements = document.getElementsByClassName("row-focused");
        for (let i = 0; i < 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 > 0) {
            for (let i = 0; i < prevElements.length; i++) {
                prevElements.item(i).classList.remove("row-focused");
            }
        }
    }

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.

I created a stackblitz to demonstrate this. https://stackblitz.com/edit/ang5-hostlistener The stackblitz is for Angular 5, but the same behavior occurs in Angular 7.

Thanks in advance for any help.

Bohms27
  • 407
  • 1
  • 5
  • 16
  • Why do you want to get `activeElement`? – StepUp Aug 15 '19 at 12:04
  • @StepUp - It's for implementing keyboard navigation. Once I click on the row, I should be able to hit the down arrow, and the event target should be the row I previously clicked on. But since it isnt being set as the activeElement, the event is being triggered by the body. – Bohms27 Aug 15 '19 at 12:18
  • @StepUp if you check the stackblitz, theres a hostlistener as well, listening for a keyboard event. The keyboard event target should be the row I clicked on previously. – Bohms27 Aug 15 '19 at 12:19

1 Answers1

0

My stackblitz didnt have all of the properties we were setting in it since I dumbed it down a bit. It turns out, one of the primeng properties was removing the tabindex from our rows. This must have changed when going from version 5 to 7.

Bohms27
  • 407
  • 1
  • 5
  • 16