Skip to content
Snippets Groups Projects
Unverified Commit 80182eda authored by ThibG's avatar ThibG Committed by GitHub
Browse files

Fix and refactor keyboard navigation in dropdown menus (#13528)

Fixes #13527

- Fixes caught keyboard events being needlessly propagated
- Let up/down arrows wrap around like the tab key does
- Refactor common code
parent ff32a25e
No related branches found
No related tags found
No related merge requests found
......@@ -68,20 +68,14 @@ class DropdownMenu extends React.PureComponent {
handleKeyDown = e => {
const items = Array.from(this.node.getElementsByTagName('a'));
const index = items.indexOf(document.activeElement);
let element;
let element = null;
switch(e.key) {
case 'ArrowDown':
element = items[index+1];
if (element) {
element.focus();
}
element = items[index+1] || items[0];
break;
case 'ArrowUp':
element = items[index-1];
if (element) {
element.focus();
}
element = items[index-1] || items[items.length-1];
break;
case 'Tab':
if (e.shiftKey) {
......@@ -89,28 +83,23 @@ class DropdownMenu extends React.PureComponent {
} else {
element = items[index+1] || items[0];
}
if (element) {
element.focus();
e.preventDefault();
e.stopPropagation();
}
break;
case 'Home':
element = items[0];
if (element) {
element.focus();
}
break;
case 'End':
element = items[items.length-1];
if (element) {
element.focus();
}
break;
case 'Escape':
this.props.onClose();
break;
}
if (element) {
element.focus();
e.preventDefault();
e.stopPropagation();
}
}
handleItemKeyPress = e => {
......
......@@ -50,7 +50,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
const index = items.findIndex(item => {
return (item.value === value);
});
let element;
let element = null;
switch(e.key) {
case 'Escape':
......@@ -60,18 +60,10 @@ class PrivacyDropdownMenu extends React.PureComponent {
this.handleClick(e);
break;
case 'ArrowDown':
element = this.node.childNodes[index + 1];
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index + 1] || this.node.firstChild;
break;
case 'ArrowUp':
element = this.node.childNodes[index - 1];
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index - 1] || this.node.lastChild;
break;
case 'Tab':
if (e.shiftKey) {
......@@ -79,28 +71,21 @@ class PrivacyDropdownMenu extends React.PureComponent {
} else {
element = this.node.childNodes[index + 1] || this.node.firstChild;
}
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
e.preventDefault();
e.stopPropagation();
}
break;
case 'Home':
element = this.node.firstChild;
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
break;
case 'End':
element = this.node.lastChild;
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
break;
}
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
e.preventDefault();
e.stopPropagation();
}
}
handleClick = e => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment