Finding if last child has specific class on keydown

Question

I have a data grid that on right arrow key, it needs to check that it has both the last child in the header and that the last child has class focus-visible applied to it on keydown. I'm able to find both the last child and the active element with focus-visible, but having an issue with my logic finding that the last child has focus-visible when the user hits the arrow key to set focus on the last child.

This is my logic so far, but not sure where I'm going wrong on checking the class is on the last child:

  //
  //ON ARROW RIGHT, IF FOCUS IS ON LAST HEADER, SET FOCUS TO FIRST BODY CELL
  //
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    //Get last child
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    //focus visible class on nav element
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    console.log("last child: ", headerCell);
    console.log("has focus visible: ", hasFocusVisible);
    if(headerCell.classList.contains('focus-visible')) {
      //if headerCell and hasFocusVisible, set focus to first cell in body
      document.querySelector('.ag-cell').focus();
    }
  }

Current state of issue: Plnkr Link

Wouldn't you want to check if `headerCell` has the "focus-visible" class to determine if the focus is on the last cell? `if (headerCell.classList.contains("focus-visible")) { ... }` — mhodges, Aug 06 '18 at 18:35
@mhodges - Yes, that's what I'm trying to figure out. One of the issues is that the class that should have 'focus-visible' is a child of `ag-header-cell` called `ag-header-cell-label` — Matt, Aug 06 '18 at 18:37
@mhodges - I discovered that I can get the nested child element with `document.querySelector('.ag-header-cell:last-child').children[1].children[1];`, but when navigating through the header now, it doesn't allow it to navigate to the last header cell before switching focus to the body cell. Any thoughts? I've updated the plunkr link as well. — Matt, Aug 06 '18 at 18:49
I'm really confused as to what you are trying to do, but here are my findings. 1. Looking at the header cell doesn't really do much for you. 2. `document.activeElement` only works if you are editing the field (in which case your ArrowRight handler doesn't trigger). 3. I don't see a `"focus-visible"` class anywhere, what I see is `"ag-cell-focus"` and `"ag-cell-no-focus"`. Seems like this code is going in 3 different directions here. What are you actually trying to accomplish? — mhodges, Aug 06 '18 at 21:17
Sorry for any confusion. I figured out how to find the last header cell, but now it automatically shifts the focus to the body cell without focusing on the last header cell first, before allowing the user to navigate to the last header cell, and then hit the right arrow key again, to proceed down to the body cells. Hopefully that helps clarify the issue. — Matt, Aug 06 '18 at 23:32

score 0 · Answer 1 · answered Aug 07 '18 at 13:24

I found that setting a boolean for the last header element and switching if the user is on the last element allows the user to navigate to the end before the focus is set to a body cell:

let lastHeaderCell = false;
document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    if(lastHeaderCell === true) {
      document.querySelector('.ag-cell').focus();
      lastHeaderCell = false;
    }
    else if(headerCell.classList.contains('focus-visible')) {
      lastHeaderCell = true;
    }
  }
}

Finding if last child has specific class on keydown

1 Answers1