Fix dropdown focus state after a re-open

bigbluebutton-html5/imports/ui/components/dropdown/component.jsx

@@ -122,6 +122,7 @@ class Dropdown extends Component {
 
     trigger = React.cloneElement(trigger, {
       ref: (ref) => { this.trigger = ref; },
+      dropdownIsOpen: this.state.isOpen,
       dropdownToggle: this.handleToggle,
       dropdownShow: this.handleShow,
       dropdownHide: this.handleHide,
@@ -130,6 +131,7 @@ class Dropdown extends Component {
     content = React.cloneElement(content, {
       ref: (ref) => { this.content = ref; },
       'aria-expanded': this.state.isOpen,
+      dropdownIsOpen: this.state.isOpen,
       dropdownToggle: this.handleToggle,
       dropdownShow: this.handleShow,
       dropdownHide: this.handleHide,

bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx

@@ -26,13 +26,15 @@ const defaultProps = {
 export default class DropdownContent extends Component {
   render() {
     const {
-      placement, className, children, style,
+      placement, children, className,
+      dropdownToggle, dropdownShow, dropdownHide, dropdownIsOpen,
+      ...restProps
     } = this.props;
-    const { dropdownToggle, dropdownShow, dropdownHide } = this.props;
 
     const placementName = placement.split(' ').join('-');
 
     const boundChildren = Children.map(children, child => cloneElement(child, {
+      dropdownIsOpen,
       dropdownToggle,
       dropdownShow,
       dropdownHide,
@@ -40,10 +42,9 @@ export default class DropdownContent extends Component {
 
     return (
       <div
-        style={style}
-        aria-expanded={this.props['aria-expanded']}
         data-test="dropdownContent"
         className={cx(styles.content, styles[placementName], className)}
+        {...restProps}
       >
         <div className={styles.scrollable}>
           {boundChildren}

bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx

@@ -33,6 +33,9 @@ const defaultProps = {
 export default class DropdownList extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      focusedIndex: false,
+    };
 
     this.childrenRefs = [];
     this.menuRefs = [];
@@ -40,22 +43,27 @@ export default class DropdownList extends Component {
     this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  componentWillMount() {
-    this.setState({
-      focusedIndex: false,
-    });
-  }
-
   componentDidMount() {
     this._menu.addEventListener('keydown', event => this.handleItemKeyDown(event));
   }
 
-  componentDidUpdate() {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.dropdownIsOpen === false) {
+      this.setState({
+        focusedIndex: false,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    console.log(this.props, prevProps);
     const { focusedIndex } = this.state;
 
     const children = [].slice.call(this._menu.children);
     this.menuRefs = children.filter(child => child.getAttribute('role') === 'menuitem');
 
+    console.log(focusedIndex);
+
     const activeRef = this.menuRefs[focusedIndex];
 
     if (activeRef) {