diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/component.jsx index bee993194a6419b08ad1b1034266c502f4d66962..948edd232b07ec0b5dfefdabdce2e2913a25e258 100644 --- a/bigbluebutton-html5/imports/ui/components/dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/dropdown/component.jsx @@ -25,27 +25,21 @@ const propTypes = { const children = props[propName]; if (!children || children.length < 2) { - return new Error( - `Invalid prop \`${propName}\` supplied to` + - ` \`${componentName}\`. Validation failed.`, - ); + return new Error(`Invalid prop \`${propName}\` supplied to` + + ` \`${componentName}\`. Validation failed.`); } const trigger = children.find(x => x.type === DropdownTrigger); const content = children.find(x => x.type === DropdownContent); if (!trigger) { - return new Error( - `Invalid prop \`${propName}\` supplied to` + - ` \`${componentName}\`. Missing \`DropdownTrigger\`. Validation failed.`, - ); + return new Error(`Invalid prop \`${propName}\` supplied to` + + ` \`${componentName}\`. Missing \`DropdownTrigger\`. Validation failed.`); } if (!content) { - return new Error( - `Invalid prop \`${propName}\` supplied to` + - ` \`${componentName}\`. Missing \`DropdownContent\`. Validation failed.`, - ); + return new Error(`Invalid prop \`${propName}\` supplied to` + + ` \`${componentName}\`. Missing \`DropdownContent\`. Validation failed.`); } return null; @@ -70,66 +64,48 @@ class Dropdown extends Component { this.state = { isOpen: false }; this.handleShow = this.handleShow.bind(this); this.handleHide = this.handleHide.bind(this); - this.handleStateCallback = this.handleStateCallback.bind(this); this.handleToggle = this.handleToggle.bind(this); this.handleWindowClick = this.handleWindowClick.bind(this); } componentDidUpdate(prevProps, prevState) { - if (prevState.isOpen !== this.props.isOpen - && this.state.isOpen !== this.props.isOpen) { - this.setState({ isOpen: this.props.isOpen }, this.handleStateCallback); + if (this.state.isOpen && !prevState.isOpen) { + this.props.onShow(); } - } - - handleStateCallback() { - const { onShow, onHide } = this.props; - if (this.state.isOpen && onShow) { - onShow(); - } else if (onHide) { - onHide(); + if (!this.state.isOpen && prevState.isOpen) { + this.props.onHide(); } } handleShow() { - const { addEventListener } = window; - addEventListener('click', this.handleWindowClick, false); - - this.setState({ isOpen: true }, this.handleStateCallback); + this.setState({ isOpen: true }, () => { + const { addEventListener } = window; + addEventListener('click', this.handleWindowClick, true); + }); } handleHide() { - const { removeEventListener } = window; - removeEventListener('click', this.handleWindowClick, false); - - const { autoFocus } = this.props; - - this.setState({ isOpen: false }, this.handleStateCallback); - - if (autoFocus) { - const triggerElement = findDOMNode(this.trigger); - triggerElement.focus(); - } + this.setState({ isOpen: false }, () => { + const { removeEventListener } = window; + removeEventListener('click', this.handleWindowClick, true); + }); } handleWindowClick(event) { - if (this.state.isOpen) { - const dropdownElement = findDOMNode(this); - const shouldUpdateState = event.target !== dropdownElement && - !dropdownElement.contains(event.target) && - this.state.isOpen; - - if (shouldUpdateState) { - this.handleHide(); - } + const triggerElement = findDOMNode(this.trigger); + + if (!this.state.isOpen + || triggerElement === event.target + || triggerElement.contains(event.target)) { + return; } + + this.handleHide(); } handleToggle() { - this.state.isOpen ? - this.handleHide() : - this.handleShow(); + return this.state.isOpen ? this.handleHide() : this.handleShow(); } render() { @@ -175,8 +151,8 @@ class Dropdown extends Component { <Button className={styles.close} label={intl.formatMessage(intlMessages.close)} - size={'lg'} - color={'default'} + size="lg" + color="default" onClick={this.handleHide} /> : null} </div> diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx index 17f4b7ae3deb70aaca89c87404d19c99f6896437..7c1b317f8fc3caf99db6b26ecf692a90aca288e8 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx @@ -89,10 +89,14 @@ class UserListContent extends Component { } onActionsShow() { - const dropdown = findDOMNode(this.dropdown); + const dropdown = this.getDropdownMenuParent(); const scrollContainer = this.props.getScrollContainerRef(); const dropdownTrigger = dropdown.children[0]; + const list = findDOMNode(this.list); + const children = [].slice.call(list.children); + children.find(child => child.getAttribute('role') === 'menuitem').focus(); + this.setState({ isActionsOpen: true, dropdownVisible: false, @@ -128,7 +132,7 @@ class UserListContent extends Component { */ checkDropdownDirection() { if (this.isDropdownActivedByUser()) { - const dropdown = findDOMNode(this.dropdown); + const dropdown = this.getDropdownMenuParent(); const dropdownTrigger = dropdown.children[0]; const dropdownContent = dropdown.children[1]; @@ -163,12 +167,6 @@ class UserListContent extends Component { */ isDropdownActivedByUser() { const { isActionsOpen, dropdownVisible } = this.state; - const list = findDOMNode(this.list); - - if (isActionsOpen && dropdownVisible) { - const children = [].slice.call(list.children); - children.find(child => child.getAttribute('role') === 'menuitem').focus(); - } return isActionsOpen && !dropdownVisible; }