fix hoisting issue and switch to keydown event

This commit is contained in:
KDSBrowne 2017-05-23 06:23:26 -07:00
parent de6e7093f3
commit 477ca85615

View File

@ -40,14 +40,14 @@ class UserList extends Component {
focusList(activeElement, list) {
activeElement.tabIndex = -1;
this.counter = 0;
this.counter = -1;
list.tabIndex = 0;
list.focus();
}
focusListItem(active, direction, element, count) {
function select() {
const select = (element) => {
element.tabIndex = 0;
element.focus();
}
@ -56,27 +56,10 @@ class UserList extends Component {
switch (direction) {
case 'down':
element.childNodes[this.counter].tabIndex = 0;
element.childNodes[this.counter].focus();
this.counter++;
select(element.childNodes[this.counter]);
break;
case 'up':
this.counter--;
element.childNodes[this.counter].tabIndex = 0;
element.childNodes[this.counter].focus();
break;
case 'upLoopUp':
case 'upLoopDown':
this.counter = count - 1;
select();
break;
case 'downLoopDown':
this.counter = -1;
select();
break;
case 'downLoopUp':
this.counter = 1;
select();
select(element.childNodes[this.counter]);
break;
}
}
@ -115,40 +98,40 @@ class UserList extends Component {
}
if (event.keyCode === KEY_CODES.ARROW_DOWN) {
if (this.counter < count) {
this.focusListItem(active, 'down', items);
}else if (this.counter === count) {
this.focusListItem(active, 'downLoopDown', list);
}else if (this.counter === 0) {
this.focusListItem(active, 'downLoopUp', list);
this.counter = this.counter + 1;
if(this.counter == count){
this.counter = 0;
}
this.focusListItem(active, 'down', items);
}
if (event.keyCode === KEY_CODES.ARROW_UP) {
if (this.counter < count && this.counter !== 0) {
this.focusListItem(active, 'up', items);
}else if (this.counter === 0) {
this.focusListItem(active, 'upLoopUp', list, count);
}else if (this.counter === count) {
this.focusListItem(active, 'upLoopDown', list, count);
this.counter = this.counter - 1;
if(this.counter <= -1){
this.counter = count - 1;
}
this.focusListItem(active, 'up', items);
}
}
componentDidMount() {
if (!this.state.compact) {
this._msgsList.addEventListener('keypress',
this._msgsList.addEventListener('keydown',
event=>this.rovingIndex(event, "messages"));
this._usersList.addEventListener('keypress',
this._usersList.addEventListener('keydown',
event=>this.rovingIndex(event, "users"));
}
}
componentWillUnmount() {
this._msgsList.removeEventListener('keypress', function (event) {}, false);
this._msgsList.removeEventListener('keydown', function (event) {}, false);
this._usersList.removeEventListener('keypress', function (event) {}, false);
this._usersList.removeEventListener('keydown', function (event) {}, false);
}
render() {