Setting focus to next page element on keypress
Clash Royale CLAN TAG#URR8PPP
Setting focus to next page element on keypress
I'm having trouble setting the focus to the next element on the page from a data grid. The idea is that the user will navigate a data grid with arrow keys, but when pressing the tab key, the focus on the page will be moved from the data grid to an entirely different element within the page.
tab
I'm trying to have the tab keypress set the focus to the next page element(outside of the data grid), but this doesn't seem to work with the current switch case I have setup:
document.querySelector('.ag-body').tabIndex=0;
let lastHeaderCell = false;
document.addEventListener("keydown", function(e)
if (e.keyCode == 9 && e.shiftKey == true)
let currentFocusedElement = document.activeElement;
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');
if(bodyFocused == true)
document.querySelector('.ag-cell').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 = document.activeElement;
let compId = currentFocusedElement.getAttribute("comp-id");
console.log("Currently Focused Element: ",compId);
//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');
);
Example of current grid state: Link
document.activeElement.blur();
@CaseyC - Thanks for the suggestion. I just realized I missed
activeElement there! Part of the issue with setting the blur though, is that it doesn't push the focus out of the grid immediately. It seems to focus on the next cell, require another tab key press and THEN focus on the next element. I've updated my code and link to reflect the current state. Any ideas?– Matt
Aug 7 at 20:03
activeElement
@CaseyC - Thoughts on why even though the focus is removed, it sets the next cell to focus and doesn't put it immediately on the next element outside of the grid?
– Matt
Aug 7 at 20:53
Not exactly sure. I didn't realize you were trying to focus the
input though. Your question made it sound like you wanted to focus the body. You can simply add an id to the input and use that to focus rather than document.activeElement.blur(). Or just get the input by tagName. That fixes the issue of having to tab twice to focus input. I'm not sure why but it doesn't seem to respect e.preventDefault() in your event handler so it always does the default operation for the tab key which is to move to the next cell.– CaseyC
Aug 7 at 21:32
input
body
id
document.activeElement.blur()
e.preventDefault()
@CaseyC - I've updated my question with more detail. I initially stated that the focus should be set to the body, but the intention is that the focus should move from the last focused element (using currentFocusedElement variable to store last focused element before tabbing) to the next element on the page, outside of the data grid. Storing the last active element is used for accessibility so that a user can then hit Shift + Tab to set focus back to the last element focused in the grid.
– Matt
Aug 8 at 13:27
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You can use
document.activeElement.blur();to set the focus to the body element. There seem to be other console errors in you linked example. They might be causing unintended side effects to.– CaseyC
Aug 7 at 19:47