From 97c207cbbdd566ef99054fce1c98ffdb0b83688d Mon Sep 17 00:00:00 2001
From: Markus Doggweiler <markus.doggweiler@gmail.com>
Date: Fri, 3 Aug 2018 15:42:24 +0200
Subject: [PATCH] #53: DropDown can be closed from the inside

---
 client/src/common/searchBox/SearchBox.tsx         | 11 ++++++++++-
 client/src/common/searchBox/dropDown/DropDown.tsx | 11 +++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/src/common/searchBox/SearchBox.tsx b/client/src/common/searchBox/SearchBox.tsx
index cc1c435..5e35416 100644
--- a/client/src/common/searchBox/SearchBox.tsx
+++ b/client/src/common/searchBox/SearchBox.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { ChangeEvent, ReactNode } from "react";
 import styled from "styled-components";
 import { StyleConstants } from "../../styling/StyleConstants";
+import { If } from "../If";
 import { DropDown } from "./dropDown/DropDown";
 import { IDropDownItemGroup } from "./dropDown/IDropDownItemGroup";
 import { SelectedKeywords } from "./SelectedKeywords";
@@ -90,7 +91,15 @@ export class SearchBox extends React.Component<ISearchBoxProps, ISearchBoxState>
             placeholder={this.state.hidePlaceholder ? "" : this.props.placeholder}
           />
         </InnerContainerDiv>
-        {this.state.showDropDown && <DropDown groups={this.props.dropDownItemGroups} />}
+        <If
+          value={this.state.showDropDown}
+          render={() => (
+            <DropDown
+              groups={this.props.dropDownItemGroups}
+              onClose={() => this.setState({ showDropDown: false })}
+            />
+          )}
+        />
       </ContainerDiv>
     );
   }
diff --git a/client/src/common/searchBox/dropDown/DropDown.tsx b/client/src/common/searchBox/dropDown/DropDown.tsx
index a98c72a..7b1c53d 100644
--- a/client/src/common/searchBox/dropDown/DropDown.tsx
+++ b/client/src/common/searchBox/dropDown/DropDown.tsx
@@ -49,8 +49,18 @@ const GroupItem = styled.li`
   }
 `;
 
+const Closer = styled.span`
+  position: absolute;
+  top: 0;
+  right: 0.5rem;
+  cursor: pointer;
+  font-weight: bold;
+  color: ${StyleConstants.colors.accent};
+`;
+
 export interface ISuggestionsProps {
   groups: IDropDownItemGroup[];
+  onClose: () => void;
 }
 
 interface ISuggestionsState {
@@ -75,6 +85,7 @@ export class DropDown extends React.PureComponent<ISuggestionsProps, ISuggestion
 
     return (
       <ContainerDiv>
+        <Closer onClick={this.props.onClose}>x</Closer>
         {groups.map((g: IDropDownItemGroup, index: number) => {
           return (
             <GroupContainerDiv key={g.title || index}>