Move tabs toolbar mouseleave handler to parent element which does not…

… use 'contents' value for display style property

Since a `display: contents` container will essentially be the width of its children, and the child was being removed on tab close, the width of the parent element was narrowing so that the mouse was no longer on top, but the mouseleave event did not fire. Moving this handler to a parent element fixes it. It encompasses the pinned tabs but this should not be an issue as the intention of the feature is to relate to the tabs bar as a whole.

Fix #14477

app/renderer/components/tabs/tabs.js

@@ -45,17 +45,6 @@ class Tabs extends React.Component {
     this.onPrevPage = this.onPrevPage.bind(this)
     this.onNextPage = this.onNextPage.bind(this)
     this.onNewTabLongPress = this.onNewTabLongPress.bind(this)
-    this.onMouseLeave = this.onMouseLeave.bind(this)
-  }
-
-  onMouseLeave () {
-    if (this.props.fixTabWidth == null) {
-      return
-    }
-
-    windowActions.onTabMouseLeave({
-      fixTabWidth: null
-    })
   }
 
   onPrevPage () {
@@ -157,7 +146,6 @@ class Tabs extends React.Component {
     props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused(state))
 
     // used in other functions
-    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.tabPageIndex = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex'])
     props.dragWindowId = dragData.get('windowId')
     props.totalPages = totalPages
@@ -170,7 +158,6 @@ class Tabs extends React.Component {
     this.tabRefs = []
     return <div className={css(styles.tabs)}
       data-test-id='tabs'
-      onMouseLeave={this.onMouseLeave}
     >
       <span className={css(
         styles.tabs__tabStrip,

app/renderer/components/tabs/tabsToolbar.js

@@ -11,6 +11,9 @@ const ReduxComponent = require('../reduxComponent')
 const Tabs = require('./tabs')
 const PinnedTabs = require('./pinnedTabs')
 
+// Actions
+const windowActions = require('../../../../js/actions/windowActions')
+
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
@@ -22,6 +25,7 @@ class TabsToolbar extends React.Component {
   constructor (props) {
     super(props)
     this.onContextMenu = this.onContextMenu.bind(this)
+    this.onMouseLeave = this.onMouseLeave.bind(this)
   }
 
   onContextMenu (e) {
@@ -38,6 +42,16 @@ class TabsToolbar extends React.Component {
     )
   }
 
+  onMouseLeave () {
+    if (this.props.fixTabWidth == null) {
+      return
+    }
+
+    windowActions.onTabMouseLeave({
+      fixTabWidth: null
+    })
+  }
+
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
@@ -52,6 +66,7 @@ class TabsToolbar extends React.Component {
     props.activeFrameKey = activeFrame.get('key')
     props.activeFrameLocation = activeFrame.get('location', '')
     props.activeFrameTitle = activeFrame.get('title', '')
+    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
 
     return props
   }
@@ -64,6 +79,7 @@ class TabsToolbar extends React.Component {
       )}
       data-test-id='tabsToolbar'
       onContextMenu={this.onContextMenu}
+      onMouseLeave={this.onMouseLeave}
     >
       {
         this.props.hasPinnedTabs