Setting focus on stored previous element with Shift + Tab

问题

I am trying to set focus back to the previously focused page element using Shift+Tab keys to set the focus on the previously focused element within the data grid, whether that be a header cell or body cell. It is currently pushing the focus back to the header cells, I suspect because they have a tab index. I'm using the following that should be looking for the stored previously active element, and applying focus-visible class back to it:

document.querySelector('.ag-body').tabIndex=0;

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 9 && e.shiftKey == true) {
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    currentFocusedElement.classList.add('focus-visible');
    console.log("Shift + Tab currently focused on: ", currentFocusedElement)
    let bodyFocused = document.querySelector('.ag-body').classList.contains('focus-visible');
    console.log("Previously focused element", currentFocusedElement)
    if(bodyFocused == true){
      currentFocusedElement.classList.add('focus-visible');
    }
  }
  else 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;
    }
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let cellHeaderId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    document.querySelector('.ag-cell[col-id="' + cellHeaderId + '"]').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    let rowId = document.activeElement.parentElement.getAttribute("row-id");
    //set focus to column header if active cell is in first row and remove body cell focus
    if(rowId === "0"){
      document.querySelector('.ag-cell[col-id="' + cellId + '"]').classList.remove('ag-cell-focus');
      document.querySelector('.ag-header-cell[col-id="' + cellId + '"] .ag-header-cell-label').focus();
    }
  }
  else if(e.key === "Tab"){
    let header = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
    console.log("Header has focus visible: ",header)
    //store currently focused cell on tab
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    console.log("Currently Stored Cell: ",compId);
    console.log("Currently Focused Element: ",currentFocusedElement)
    //removes focus from current cell
    document.activeElement.blur();
    console.log("Active Element was: ", document.activeElement)
    if(header == true) {
      document.querySelector('.ag-header-cell').tabIndex = -1;
      document.querySelector('.ag-cell[col-id="' + compId + '"]').classList.add('ag-cell-focus');
    }
  }
});

Link to current state: Plnkr

来源：https://stackoverflow.com/questions/51750918/setting-focus-on-stored-previous-element-with-shift-tab