diff --git a/gui/web/src/components/molecules/BotCard/BotCard.js b/gui/web/src/components/molecules/BotCard/BotCard.js
index 9ffbf2eb1..69c0956ed 100644
--- a/gui/web/src/components/molecules/BotCard/BotCard.js
+++ b/gui/web/src/components/molecules/BotCard/BotCard.js
@@ -336,6 +336,7 @@ class BotCard extends Component {
           <div className={styles.optionsSpacer}/>
           <PopoverMenu
             className={styles.optionsMenu}
+            alwaysOnClick={this.closeOptions}
             enableOffers={true}
             onOffers={this.showOffers}
             enableMarket={true}
diff --git a/gui/web/src/components/molecules/PopoverMenu/PopoverMenu.js b/gui/web/src/components/molecules/PopoverMenu/PopoverMenu.js
index fb306e91a..4bfa47e4a 100644
--- a/gui/web/src/components/molecules/PopoverMenu/PopoverMenu.js
+++ b/gui/web/src/components/molecules/PopoverMenu/PopoverMenu.js
@@ -1,16 +1,26 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styles from './PopoverMenu.module.scss';
 
 class PopoverMenu extends Component {
+  static propTypes = {	
+    alwaysOnClick: PropTypes.func.isRequired,	
+  };	
+
+  defaultOnClick(actualOnClickFn) {	
+      actualOnClickFn()
+      this.props.alwaysOnClick() // this is the onClose passed into the props
+  }	
+
   render() {
     return (
       <div className={styles.wrapper}>
         <div className={styles.list}>
-          {this.props.enableOffers ? <div className={styles.item} onClick={this.props.onOffers}>Show Offers</div> : <div className={[styles.item, styles.disabled].join(' ')}>Show Offers</div>}
-          {this.props.enableMarket ? <div className={styles.item} onClick={this.props.onMarket}>Show Market</div> : <div className={[styles.item, styles.disabled].join(' ')}>Show Market</div>}
-          {this.props.enableEdit ? <div className={styles.item} onClick={this.props.onEdit}>Edit</div> : <div className={[styles.item, styles.disabled].join(' ')}>Edit</div>}
-          {this.props.enableCopy ? <div className={styles.item} onClick={this.props.onCopy}>Copy</div> : <div className={[styles.item, styles.disabled].join(' ')}>Copy</div>}
-          {this.props.enableDelete ? <div className={styles.itemDanger} onClick={this.props.onDelete}>Delete</div> : <div className={[styles.item, styles.disabled].join(' ')}>Delete</div>}
+          {this.props.enableOffers ? <div className={styles.item} onClick={this.defaultOnClick(this.props.onOffers)}>Show Offers</div> : <div className={[styles.item, styles.disabled].join(' ')}>Show Offers</div>}
+          {this.props.enableMarket ? <div className={styles.item} onClick={this.defaultOnClick(this.props.onMarket)}>Show Market</div> : <div className={[styles.item, styles.disabled].join(' ')}>Show Market</div>}
+          {this.props.enableEdit ? <div className={styles.item} onClick={this.defaultOnClick(this.props.onEdit)}>Edit</div> : <div className={[styles.item, styles.disabled].join(' ')}>Edit</div>}
+          {this.props.enableCopy ? <div className={styles.item} onClick={this.defaultOnClick(this.props.onCopy)}>Copy</div> : <div className={[styles.item, styles.disabled].join(' ')}>Copy</div>}
+          {this.props.enableDelete ? <div className={styles.itemDanger} onClick={this.defaultOnClick(this.props.onDelete)}>Delete</div> : <div className={[styles.item, styles.disabled].join(' ')}>Delete</div>}
         </div>
       </div>
     );