From a599bcd7c7719161e90458f06f6a93dfc00a660e Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Tue, 28 Nov 2017 12:10:12 -0800
Subject: [PATCH] remove the need for .firstChild

---
 .../components/user-list/user-list-content/component.jsx   | 2 +-
 .../user-list-content/user-messages/component.jsx          | 7 ++++---
 .../user-list-content/user-participants/component.jsx      | 7 ++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
index 605a91ca2c..44b3bb25bd 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
@@ -71,7 +71,7 @@ class UserContent extends Component {
 
   rovingIndex(event, list, items, numberOfItems) {
     const active = document.activeElement;
-    const changedItems = items.firstChild;
+    const changedItems = items;
 
     if (event.keyCode === KEY_CODES.TAB) {
       if (this.focusedItemIndex !== -1) {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
index 79b487bf48..f7b8e2d8ad 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
@@ -3,6 +3,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { defineMessages } from 'react-intl';
 import cx from 'classnames';
+import ReactDOM from 'react-dom';
 import styles from './styles';
 import ChatListItem from './../../chat-list-item/component';
 
@@ -90,7 +91,7 @@ class UserMessages extends Component {
         event => this.props.rovingIndex(
           event,
           this._msgsList,
-          this._msgItems,
+          ReactDOM.findDOMNode(this._msgItems),
           this.props.openChats.length,
         ),
       );
@@ -120,8 +121,8 @@ class UserMessages extends Component {
           className={styles.scrollableList}
           ref={(ref) => { this._msgsList = ref; }}
         >
-          <div ref={(ref) => { this._msgItems = ref; }} className={styles.list}>
-            <TransitionGroup>
+          <div className={styles.list}>
+            <TransitionGroup ref={(ref) => { this._msgItems = ref; }} >
               {openChats.map(chat => (
                 <CSSTransition
                   classNames={listTransition}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
index 577565a59e..3c9cb05d18 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { defineMessages } from 'react-intl';
+import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import styles from '/imports/ui/components/user-list/user-list-content/styles';
 import UserListItem from './user-list-item/component';
@@ -108,7 +109,7 @@ class UserParticipants extends Component {
         event => this.props.rovingIndex(
           event,
           this.refScrollContainer,
-          this.refScrollItems,
+          ReactDOM.findDOMNode(this.refScrollItems),
           this.props.users.length,
         ),
       );
@@ -196,8 +197,8 @@ class UserParticipants extends Component {
           tabIndex={0}
           ref={(ref) => { this.refScrollContainer = ref; }}
         >
-          <div ref={(ref) => { this.refScrollItems = ref; }} className={styles.list}>
-            <TransitionGroup>
+          <div className={styles.list}>
+            <TransitionGroup ref={(ref) => { this.refScrollItems = ref; }}>
               { users.map(user => (
                 <CSSTransition
                   classNames={listTransition}