@imposium-hub/components 1.38.16 → 1.38.17

package/components/button-menu/ButtonMenu.tsx

@@ -14,6 +14,7 @@ interface IButtonMenuState {
 class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
 
     private evtHandlers : any;
+    private toggleRef : any;
 
     constructor(props) {
 
@@ -26,15 +27,20 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
             toggleMenu: (e) => this.toggleMenu(e),
             clickOutside: (e) => this.handleClickOutside(e)
         };
+
+        this.toggleRef = React.createRef();
     }
 
     private handleClickOutside(e) {
 
-        document.removeEventListener('click', this.evtHandlers.clickOutside);
+        const clickOnToggle = (this.toggleRef && this.toggleRef.current && this.toggleRef.current.contains(e.target)) ? true : false;
 
-        this.setState({
-            open: false
-        });
+        if (!clickOnToggle) {
+            document.removeEventListener('click', this.evtHandlers.clickOutside);
+            this.setState({
+                open: false
+            });
+        }
     }
 
     public componentWillUnmount() {
@@ -44,9 +50,6 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
     public toggleMenu(e) {
 
-        e.preventDefault();
-        e.stopPropagation();
-
         const newState = !this.state.open;
 
         this.setState({
@@ -106,6 +109,7 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
         // Clone the trigger button passed in and add an onClick listener
         const trigger = React.cloneElement(button, {
+            buttonRef: this.toggleRef,
             onClick: this.evtHandlers.toggleMenu,
             active: open
         });

package/components/dropdown/dropdown.tsx

@@ -71,7 +71,6 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
     }
 
     private onEsc = (e : any) : void => {
-        const {onOutsideClick} = this.props;
 
         if (e.keyCode === ImposiumDropdown.ESC_CODE) {
             this.cancelRender(true);
@@ -79,14 +78,13 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
     }
 
     private detectOutsideClick = (e : any) : void => {
-        const {toggleRef, onOutsideClick} = this.props;
+        const {toggleRef} = this.props;
         const {target} = e;
 
-        if (
-            this.dropdownRef.current &&
-            !this.dropdownRef.current.contains(target) &&
-            !toggleRef.current.contains(target)
-        ) {
+        const clickInside = (this.dropdownRef.current && this.dropdownRef.current.contains(target)) ? true : false;
+        const clickOnToggle = (toggleRef && toggleRef.current && toggleRef.current.contains(target)) ? true : false;
+
+        if (!clickInside && !clickOnToggle) {
             this.cancelRender(true);
         }
     }