Fixes brave/brave-browser#10199 - Persists widget menus when they are…

…n't in the foreground
brave · Aug 4, 2020 · 62a80f7 · 62a80f7
1 parent 83c7844
commit 62a80f7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/components/brave_new_tab_ui/components/default/widget/index.tsx b/components/brave_new_tab_ui/components/default/widget/index.tsx
@@ -23,6 +23,7 @@ export interface WidgetProps {
 }
 
 export interface WidgetState {
+  hoveringOverMenu: boolean
   widgetMenuPersist: boolean
 }
 
@@ -31,6 +32,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
     constructor (props: P & WidgetProps) {
       super(props)
       this.state = {
+        hoveringOverMenu: false,
         widgetMenuPersist: false
       }
     }
@@ -40,11 +42,27 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
     }
 
     persistWidgetHover = () => {
-      this.setState({ widgetMenuPersist: true })
+      this.setState({
+        hoveringOverMenu: true,
+        widgetMenuPersist: true
+      })
+    }
+
+    disableHover = () => {
+      this.setState({ hoveringOverMenu: false })
     }
 
     unpersistWidgetHover = () => {
-      this.setState({ widgetMenuPersist: false })
+      if (!this.state.hoveringOverMenu) {
+        this.setState({ widgetMenuPersist: false })
+      }
+    }
+
+    disableMenu = () => {
+      this.setState({
+        hoveringOverMenu: false,
+        widgetMenuPersist: false
+      })
     }
 
     render () {
@@ -67,7 +85,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
         <StyledWidgetContainer
           menuPosition={menuPosition}
           textDirection={textDirection}
-          onMouseLeave={this.unpersistWidgetHover}
+          onMouseLeave={this.disableHover}
         >
           <StyledWidget
             isCrypto={isCrypto}
@@ -90,6 +108,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
             hideWidget={hideWidget as HideWidgetFunction}
             unpersistWidgetHover={this.unpersistWidgetHover}
             onMouseEnter={this.persistWidgetHover}
+            onMouseLeave={this.disableMenu}
           />
           }
         </StyledWidgetContainer>

diff --git a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
@@ -24,6 +24,7 @@ interface Props {
   widgetTitle?: string
   onLearnMore?: () => void
   onMouseEnter: () => void
+  onMouseLeave: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
 }
@@ -65,6 +66,11 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
     this.setState({ showMenu: false })
   }
 
+  onMouseLeave = () => {
+    this.closeMenu()
+    this.props.onMouseLeave()
+  }
+
   unmountWidget = () => {
     this.props.hideWidget()
     this.props.unpersistWidgetHover()
@@ -101,6 +107,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
         {showMenu && <StyledWidgetMenu
           textDirection={textDirection}
           menuPosition={menuPosition}
+          onMouseLeave={this.onMouseLeave}
         >
           <StyledWidgetButton
             onClick={this.unmountWidget}