From 70875a62416faad475fe26cbbfe10762df52c789 Mon Sep 17 00:00:00 2001
From: Friedjoff Trautwein <friedjoff.trautwein@geops.de>
Date: Fri, 1 May 2020 11:55:46 +0200
Subject: [PATCH] fix: close ecogram popup on outside click and improve text
 rendering

---
 src/components/EcogramPopup.js | 47 ++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/EcogramPopup.js b/src/components/EcogramPopup.js
index 154e1239..222512ae 100644
--- a/src/components/EcogramPopup.js
+++ b/src/components/EcogramPopup.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { List, Popup } from 'semantic-ui-react';
 // eslint-disable-next-line import/no-unresolved
@@ -9,23 +9,42 @@ import Button from './Button';
 import ForestTypeButton from './ForestTypeButton';
 
 function EcogramPopup({ target, forestTypes, onClose, selectForestType }) {
+  const container = useRef();
   const { t, i18n } = useTranslation();
 
+  const handleClickOutside = (e) => {
+    if (container.current && container.current.contains(e.target) === false) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  });
+
   return (
-    <Popup context={target} position="top center" open={forestTypes.length > 0}>
-      <List>
-        {forestTypes.map((f) => (
-          <List.Item style={{ whiteSpace: 'nowrap' }}>
-            <ForestTypeButton code={f} />
-            <Button active onClick={() => selectForestType(f)}>
-              {f} - {info('forestType', f)[i18n.language]}
-            </Button>
+    <Popup
+      context={target}
+      flowing
+      position="top center"
+      open={forestTypes.length > 0}
+    >
+      <div ref={container}>
+        <List>
+          {forestTypes.map((f) => (
+            <List.Item style={{ display: 'flex' }}>
+              <ForestTypeButton code={f} />
+              <Button active onClick={() => selectForestType(f)}>
+                {f} - {info('forestType', f)[i18n.language]}
+              </Button>
+            </List.Item>
+          ))}
+          <List.Item>
+            <Button onClick={() => onClose()}>{t('forestType.cancel')}</Button>
           </List.Item>
-        ))}
-        <List.Item>
-          <Button onClick={() => onClose()}>{t('forestType.cancel')}</Button>
-        </List.Item>
-      </List>
+        </List>
+      </div>
     </Popup>
   );
 }