diff options
author | ThibG <thib@sitedethib.com> | 2020-04-21 15:13:26 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-21 15:13:26 +0200 |
commit | 80182eda622e1317bffb6729259b8a81d84251a2 (patch) | |
tree | dcce603b89f6a8867f6696d86382cbf940d12d16 /app/javascript/mastodon/features/compose/components/privacy_dropdown.js | |
parent | ff32a25ee3d5032122b8b7af31e6e51304e1e703 (diff) |
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
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/privacy_dropdown.js')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/privacy_dropdown.js | 35 |
1 files changed, 10 insertions, 25 deletions
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js index de030b7a2..57588fe96 100644 --- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -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 => { |