From 3906448d713da7106a9130077e57a7d7e47dff39 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Thu, 8 Jun 2017 08:33:25 -0700
Subject: [PATCH] fix keydown event bugs
---
.../ui/components/dropdown/list/component.jsx | 105 +++++++++++++++---
.../ui/components/user-list/component.jsx | 4 +-
.../user-list/user-list-item/component.jsx | 3 +-
3 files changed, 91 insertions(+), 21 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
index 78bb001414..a56e18ba4e 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
@@ -26,9 +26,14 @@ export default class DropdownList extends Component {
this.childrenRefs = [];
this.handleItemKeyDown = this.handleItemKeyDown.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
+ this.handleItemKeyDownWithparent = this.handleItemKeyDownWithparent.bind(this);
this.focusedItemIndex = 0;
}
+ componentDidMount() {
+ this._menu.addEventListener('keydown', event=>this.handleItemKeyDownWithparent(event));
+ }
+
componentWillMount() {
this.setState({
activeItemIndex: 0,
@@ -49,7 +54,85 @@ export default class DropdownList extends Component {
}
}
+ handleItemKeyDownWithparent(event) {
+ const { onActionsHide, getDropdownMenuParent, } = this.props;
+
+ if (!getDropdownMenuParent) {
+
+ let selectableItems = [];
+ for (let i = 0; i < (this._menu.children.length); i++) {
+ if (this._menu.children[i].getAttribute("role") === 'menuitem'){
+ selectableItems.push(this._menu.children[i]);
+ }
+ }
+
+ const focusMenuItem = () => {
+ selectableItems[this.focusedItemIndex].focus();
+ }
+
+ if (KEY_CODES.ARROW_UP === event.which) {
+ event.stopPropagation();
+
+ this.focusedItemIndex -= 1;
+
+ if (this.focusedItemIndex < 0) {
+ this.focusedItemIndex = selectableItems.length - 1;
+ }else if (this.focusedItemIndex > selectableItems.length - 1) {
+ this.focusedItemIndex = 0;
+ }
+
+ focusMenuItem();
+ return;
+ }
+
+ if ([KEY_CODES.ARROW_DOWN].includes(event.keyCode)) {
+ event.stopPropagation();
+
+ this.focusedItemIndex += 1;
+
+ if(this.focusedItemIndex > selectableItems.length - 1){
+ this.focusedItemIndex = 0;
+ }
+
+ focusMenuItem();
+ return;
+ }
+
+ if ([KEY_CODES.ENTER, KEY_CODES.ARROW_RIGHT].includes(event.keyCode)) {
+ event.stopPropagation();
+ document.activeElement.firstChild.click();
+ return;
+ }
+
+ if ([KEY_CODES.ESCAPE, KEY_CODES.TAB, KEY_CODES.ARROW_LEFT].includes(event.keyCode)) {
+ const { dropdownHide } = this.props;
+ event.stopPropagation();
+ dropdownHide();
+ return;
+ }
+
+ }else{
+
+ if ([KEY_CODES.ESCAPE, KEY_CODES.TAB, KEY_CODES.ARROW_LEFT].includes(event.keyCode)) {
+ const { getDropdownMenuParent, dropdownHide, } = this.props;
+
+ event.stopPropagation();
+
+ if (getDropdownMenuParent) {
+ getDropdownMenuParent().focus();
+ }
+
+ dropdownHide();
+ return;
+ }
+
+ document.activeElement.firstChild.click();
+ onActionsHide();
+ }
+ }
+
handleItemKeyDown(event, callback) {
+
const { dropdownHide } = this.props;
const { activeItemIndex } = this.state;
@@ -61,32 +144,21 @@ export default class DropdownList extends Component {
}
const focusMenuItem = () => {
- event.preventDefault();
- event.stopPropagation();
-
selectableItems[this.focusedItemIndex].focus();
}
if ([KEY_CODES.ENTER, KEY_CODES.SPACE].includes(event.keyCode)) {
- const { getDropdownMenuParent } = this.props;
-
- if (getDropdownMenuParent) {
- return;
- }
-
- event.preventDefault();
event.stopPropagation();
-
+
document.activeElement.firstChild.click();
}
if ([KEY_CODES.ARROW_DOWN].includes(event.keyCode)) {
- event.preventDefault();
event.stopPropagation();
this.focusedItemIndex += 1;
- if(this.focusedItemIndex > selectableItems.length - 1){
+ if (this.focusedItemIndex > selectableItems.length - 1) {
this.focusedItemIndex = 0;
}
@@ -94,24 +166,22 @@ export default class DropdownList extends Component {
}
if (KEY_CODES.ARROW_UP === event.which) {
- event.preventDefault();
event.stopPropagation();
this.focusedItemIndex -= 1;
if (this.focusedItemIndex < 0) {
this.focusedItemIndex = selectableItems.length - 1;
- }else if (this.focusedItemIndex > selectableItems.length - 1){
+ }else if (this.focusedItemIndex > selectableItems.length - 1) {
this.focusedItemIndex = 0;
}
focusMenuItem();
}
- if ([KEY_CODES.ESCAPE, KEY_CODES.TAB, KEY_CODES.ARROW_LEFT].includes(event.keyCode)){
+ if ([KEY_CODES.ESCAPE, KEY_CODES.TAB, KEY_CODES.ARROW_LEFT].includes(event.keyCode)) {
const { getDropdownMenuParent } = this.props;
- event.preventDefault();
event.stopPropagation();
if (getDropdownMenuParent) {
@@ -156,7 +226,6 @@ export default class DropdownList extends Component {
onClick: (event) => {
let { onClick } = item.props;
onClick = onClick ? onClick.bind(item) : null;
-
this.handleItemClick(event, onClick);
},
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
index a60b6a794d..6dc577205e 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
@@ -77,8 +77,8 @@ class UserList extends Component {
this.focusList(list);
}
- if ([KEY_CODES.ARROW_RIGHT, KEY_CODES.ENTER].includes(event.keyCode)) {
- active.firstChild.click();
+ if ([KEY_CODES.ARROW_RIGHT, KEY_CODES.ARROW_SPACE].includes(event.keyCode)) {
+ active.firstChild.click();
}
if (event.keyCode === KEY_CODES.ARROW_DOWN) {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
index 9c2d60fd40..42f77a869e 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
@@ -300,7 +300,8 @@ class UserListItem extends Component {
<DropdownList
ref={(ref) => { this.list = ref; }}
- getDropdownMenuParent={this.getDropdownMenuParent}>
+ getDropdownMenuParent={this.getDropdownMenuParent}
+ onActionsHide={this.onActionsHide}>
{
[
(<DropdownListTitle
--
GitLab