fix(community-side-navigation): fix overlap when sidenav expands

telus · Dec 6, 2019 · 30b8bed · 30b8bed
1 parent 6a1cd8e
commit 30b8bed
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/SideNavigation/SideNavigation.jsx b/packages/SideNavigation/SideNavigation.jsx
@@ -86,7 +86,6 @@ class SideNavigation extends Component {
   componentDidMount() {
     this.checkOffset()
     window.addEventListener('scroll', this.checkOffset)
-    window.addEventListener('click', this.checkOffset)
     this.adjustWidth()
     window.addEventListener('resize', this.adjustWidth)
     this.checkActiveState()
@@ -119,7 +118,6 @@ class SideNavigation extends Component {
 
   removeEventListeners() {
     window.removeEventListener('scroll', this.checkOffset)
-    window.removeEventListener('click', this.checkOffset)
     window.removeEventListener('resize', this.adjustWidth)
   }
 
@@ -143,6 +141,7 @@ class SideNavigation extends Component {
       ((sideNavRect.top < 0 &&
         containerRect.top < 0 &&
         sideNavRect.bottom <= containerRect.bottom &&
+        sideNavRect.bottom > 0 &&
         this.state.variant !== 'bottom') ||
         (sideNavRect.top > 0 && containerRect.top <= 0)) &&
       sideNavRect.height < containerRect.height
@@ -206,6 +205,7 @@ class SideNavigation extends Component {
                     handleToggleSubMenu: this.toggleSubMenu,
                     isOpen: this.checkAccordion(id),
                     id,
+                    callback: this.checkOffset,
                   }
                 }
                 return <StyledLi>{React.cloneElement(child, options)}</StyledLi>

diff --git a/packages/SideNavigation/SubMenu/SubMenu.jsx b/packages/SideNavigation/SubMenu/SubMenu.jsx
@@ -90,7 +90,7 @@ class SubMenu extends React.Component {
   }
 
   render() {
-    const { children, label, isOpen, ...rest } = this.props
+    const { children, label, isOpen, callback, ...rest } = this.props
 
     const activeChild = this.state.active
     return (
@@ -120,6 +120,7 @@ class SubMenu extends React.Component {
           duration={500}
           in={isOpen}
           height={this.state.subMenuHeight}
+          onEntered={callback}
         >
           {() => (
             <SubMenuContainer
@@ -170,6 +171,12 @@ SubMenu.propTypes = {
    * @ignore
    */
   onClick: PropTypes.func,
+  /**
+   * Callback.
+   *
+   * @ignore
+   */
+  callback: PropTypes.func,
 }
 
 SubMenu.defaultProps = {
@@ -178,6 +185,7 @@ SubMenu.defaultProps = {
   children: undefined,
   id: undefined,
   onClick: undefined,
+  callback: undefined,
 }
 
 export default SubMenu
diff --git a/packages/SideNavigation/__tests__/SideNavigation.spec.jsx b/packages/SideNavigation/__tests__/SideNavigation.spec.jsx
@@ -133,9 +133,8 @@ describe('SideNavigation', () => {
     window.removeEventListener = jest.fn()
 
     sideNavigation.instance().removeEventListeners()
-    expect(window.removeEventListener).toHaveBeenCalledTimes(3)
+    expect(window.removeEventListener).toHaveBeenCalledTimes(2)
     expect(window.removeEventListener.mock.calls[0]).toContain('scroll')
-    expect(window.removeEventListener.mock.calls[1]).toContain('click')
-    expect(window.removeEventListener.mock.calls[2]).toContain('resize')
+    expect(window.removeEventListener.mock.calls[1]).toContain('resize')
   })
 })