In my react project, I have a scenario wherein the keyDown Event gets triggered on all the keyboard events except the tab event, when I press the tab it focuses on the next element that's there on the page.
Please check the screenshot.
Could you please advise why the tab press doesn't call the onKeyDown event but it does for any other key press?
Thanks
Click here to view the gif: Event get triggered on ArrowDown/w or any other keys except Tab
class CalendarDay extends React.Component {
constructor(...args) {
super(...args);
}
onKeyDown(day, e) {
//***** DOESN'T GET TRIGGERED ON 'TAB' KEY PRESS
const { onDayClick, onFoscusedTabKey, onKeyDownTabFocus } = this.props;
const { key } = e;
if (key === 'Enter' || key === ' ') {
onDayClick(day, e);
} else if (key === 'Tab' && !e.shiftKey) {
onFoscusedTabKey(e);
}
onKeyDownTabFocus && onKeyDownTabFocus(e);
}
render() {
const {
...
} = this.props;
return (
<td
role="link" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
ref={this.setButtonRef}
aria-label={ariaLabel}
onMouseEnter={onDayMouseEnterDebouncedCB}
onMouseLeave={onDayMouseLeaveDebounceCB}
onMouseUp={(e) => { e.currentTarget.blur(); }}
onClick={(e) => { this.onDayClick(day, e); }}
onKeyDown={(e) => { this.onKeyDown(day, e); }}
>
{renderDayContents ? renderDayContents(day, modifiers) : day.format('D')}
</td>
);
}
}