From 3eeacafddcb5185377cd66336d7d6e6a44fc682e Mon Sep 17 00:00:00 2001
From: Manuel Bouza <manuel@bouza.ch>
Date: Tue, 23 Apr 2019 22:00:07 +0200
Subject: [PATCH] Fix unexpected closing of trello card when clicking on bubble

---
 CHANGELOG.md                | 32 +++++++++++++++++++++++++++++++-
 package.json                |  2 +-
 src/js/components/Bubble.js |  4 ++--
 src/js/content.js           | 23 ++++++++++++-----------
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b446d33..0918426 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,62 +1,92 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
 - Add support for starting/stopping a timer
 - Show hours as HH:MM or decimal in the Bubble, depending on setting in MOCO
 
-
 ## [1.0.18] - 2019-03-23
+
 ### Added
+
 - First release of version 1
 
 ## [1.0.19] - 2019-03-26
+
 ### Changed
+
 - Position Bubble in the bottom right by default
 
 ### Fixed
+
 - Set default value of subdomain to `__unset__` to prevent network error if it is empty
 
 ## [1.0.20] - 2019-03-26
+
 ### Added
+
 - Add support for tags in description
 
 ## [1.0.21] - 2019-03-26
+
 ### Changed
+
 - Update README with example configuration and instructions for local installation
 
 ## [1.0.22] - 2019-03-28
+
 ### Changed
+
 - Change the default value of subdomain to `unset` to have a well-formed URL.
 
 ## [1.1.0] - 2019-03-30
+
 ### Added
+
 - Read project identifier from Asana project title
 - Add support for meistertask.com
 
 ### Fixed
+
 - Link logo in modal to MOCO activities page
 - Set full url on service, including query params
 
 ## [1.1.1] - 2019-04-01
+
 ### Fixed
+
 - Discard projects with undefined identifier for preselecting
 
 ## [1.1.2] - 2019-04-06
+
 ### Fixed
+
 - Allow production build without BUGSNAG_API_KEY
 - Hours entered in brackets must be non-billable
 
 ### Changed
+
 - Read project identifier also from card title in the meistertask service
 
 ## [1.1.3] - 2019-04-10
+
 ### Fixed
+
 - Read projected identifier in Asana's "My tasks"-view
 
 ## [1.1.4] - 2019-04-11
+
 ### Added
+
 - Show customer name in the project select box
+
+## [1.1.5] - 2019-04-24
+
+### Fixed
+
+- Unexpected closing of Trello card when clicking on Bubble
diff --git a/package.json b/package.json
index 51c0d54..892d444 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "moco-browser-extensions",
   "description": "Browser plugin for MOCO",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
   "scripts": {
     "start": "yarn start:chrome",
diff --git a/src/js/components/Bubble.js b/src/js/components/Bubble.js
index ed4c6e1..e21b6b7 100644
--- a/src/js/components/Bubble.js
+++ b/src/js/components/Bubble.js
@@ -12,11 +12,11 @@ const Bubble = ({ bookedHours }) => (
 )
 
 Bubble.propTypes = {
-  bookedHours: PropTypes.number
+  bookedHours: PropTypes.number,
 }
 
 Bubble.defaultProps = {
-  bookedHours: 0
+  bookedHours: 0,
 }
 
 export default Bubble
diff --git a/src/js/content.js b/src/js/content.js
index 9dcbadb..f431fb9 100644
--- a/src/js/content.js
+++ b/src/js/content.js
@@ -15,8 +15,15 @@ const findService = createServiceFinder(remoteServices)(document)
 chrome.runtime.onConnect.addListener(function(port) {
   const messenger = new ContentMessenger(port)
 
+  function clickHandler(event) {
+    if (event.target.closest(".moco-bx-bubble")) {
+      event.stopPropagation()
+      messenger.postMessage({ type: "togglePopup" })
+    }
+  }
   port.onDisconnect.addListener(() => {
     messenger.stop()
+    document.removeEventListener("click", clickHandler, true)
   })
 
   function updateBubble({ service, bookedHours } = {}) {
@@ -24,6 +31,7 @@ chrome.runtime.onConnect.addListener(function(port) {
       const domRoot = document.createElement("div")
       domRoot.setAttribute("id", "moco-bx-root")
       document.body.appendChild(domRoot)
+      document.addEventListener("click", clickHandler, true)
     }
 
     ReactDOM.render(
@@ -40,21 +48,14 @@ chrome.runtime.onConnect.addListener(function(port) {
             service &&
             // eslint-disable-next-line react/display-name
             (props => (
-              <animated.div
-                className="moco-bx-bubble"
-                style={{ ...props, ...service.position }}
-                onClick={event => {
-                  event.stopPropagation()
-                  messenger.postMessage({ type: "togglePopup" })
-                }}
-              >
+              <animated.div className="moco-bx-bubble" style={{ ...props, ...service.position }}>
                 <Bubble key={service.url} bookedHours={bookedHours} />
               </animated.div>
             ))
           }
         </Transition>
       </ErrorBoundary>,
-      document.getElementById("moco-bx-root")
+      document.getElementById("moco-bx-root"),
     )
   }
 
@@ -69,7 +70,7 @@ chrome.runtime.onConnect.addListener(function(port) {
       <ErrorBoundary>
         <Popup ref={popupRef} {...payload} onRequestClose={closePopup} />
       </ErrorBoundary>,
-      document.getElementById("moco-bx-popup-root")
+      document.getElementById("moco-bx-popup-root"),
     )
   }
 
@@ -86,7 +87,7 @@ chrome.runtime.onConnect.addListener(function(port) {
     const service = findService(window.location.href)
     messenger.postMessage({
       type: "newService",
-      payload: { isOpen: !!popupRef.current, service }
+      payload: { isOpen: !!popupRef.current, service },
     })
   })