From 2b82f50820a26105612e394fd5d19a8b00110aff Mon Sep 17 00:00:00 2001
From: Oskar Hane <oh@oskarhane.com>
Date: Mon, 22 May 2017 23:03:46 +0200
Subject: [PATCH] Fix for sensitive dropdown menu closing too easy

Don't go `<li><li>xxx</li></li>`. Inner `<li>` should be wrapped by an `<ul>`.
---
 src/browser/modules/Stream/FrameTitlebar.jsx | 12 +++++++-----
 src/browser/modules/Stream/styled.jsx        |  6 +++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/browser/modules/Stream/FrameTitlebar.jsx b/src/browser/modules/Stream/FrameTitlebar.jsx
index 7930323dc96..88d15c4f166 100644
--- a/src/browser/modules/Stream/FrameTitlebar.jsx
+++ b/src/browser/modules/Stream/FrameTitlebar.jsx
@@ -30,7 +30,7 @@ import { FrameButton } from 'browser-components/buttons'
 import Visible from 'browser-components/Visible'
 import { CSVSerializer } from 'services/serializer'
 import { ExpandIcon, ContractIcon, RefreshIcon, CloseIcon, UpIcon, DownIcon, PinIcon, DownloadIcon } from 'browser-components/icons/Icons'
-import { StyledFrameTitleBar, StyledFrameCommand, DottedLineHover, FrameTitlebarButtonSection, DropdownContent, DropdownButton, DropdownItem } from './styled'
+import { StyledFrameTitleBar, StyledFrameCommand, DottedLineHover, FrameTitlebarButtonSection, DropdownList, DropdownContent, DropdownButton, DropdownItem } from './styled'
 import { downloadPNGFromSVG } from 'shared/services/exporting/pngUtils'
 
 const getCsvData = (exportData) => {
@@ -81,10 +81,12 @@ class FrameTitlebar extends Component {
           <Visible if={frame.type === 'cypher' && props.exportData}>
             <DropdownButton>
               <DownloadIcon />
-              <DropdownContent class='dropdown-content'>
-                <DropdownItem onClick={() => this.exportPNG()}>Export PNG</DropdownItem>
-                <DropdownItem download='export.csv' href={this.state.csvData}>Export CSV</DropdownItem>
-              </DropdownContent>
+              <DropdownList>
+                <DropdownContent>
+                  <DropdownItem onClick={() => this.exportPNG()}>Export PNG</DropdownItem>
+                  <DropdownItem download='export.csv' href={this.state.csvData}>Export CSV</DropdownItem>
+                </DropdownContent>
+              </DropdownList>
             </DropdownButton>
           </Visible>
           <FrameButton title='Pin at top' onClick={() => {
diff --git a/src/browser/modules/Stream/styled.jsx b/src/browser/modules/Stream/styled.jsx
index 49119b7da82..4ef748d518c 100644
--- a/src/browser/modules/Stream/styled.jsx
+++ b/src/browser/modules/Stream/styled.jsx
@@ -275,12 +275,16 @@ export const DropdownButton = styled.li`
   }
   display: inline-block;
   &:hover {
-    > .dropdown-content {
+    > ul li {
     display: block;
     }
   };
 `
 
+export const DropdownList = styled.ul`
+
+`
+
 export const DropdownContent = styled.li`
   display: none;
   position: absolute;