From 6f0215d63bf0b5a1bd810943eb308b755676c5af Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@intel.com>
Date: Sat, 20 Feb 2021 12:27:09 +0300
Subject: [PATCH] Improved maintanance of popups visibility (#2809)

* Manual handling of popovers visibility

* Updated version & changelog, added minor comments

* Removed extra user hook
---
 CHANGELOG.md                                  |  1 +
 cvat-ui/package-lock.json                     |  2 +-
 cvat-ui/package.json                          |  2 +-
 .../handle-popover-visibility.tsx             | 25 +++++++++++++------
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c80fe584..64acc336 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bumped nuclio version to 1.5.16 (<https://github.com/openvinotoolkit/cvat/pull/2578>)
 - All methods for interative segmentation accept negative points as well
 - Persistent queue added to logstash (<https://github.com/openvinotoolkit/cvat/pull/2744>)
+- Improved maintanance of popups visibility (<https://github.com/openvinotoolkit/cvat/pull/2809>)
 
 ### Deprecated
 
diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
index cd63e3fb..429b6f3a 100644
--- a/cvat-ui/package-lock.json
+++ b/cvat-ui/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
index 9365ae59..45639469 100644
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
index fdc80926..2ef920ff 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
@@ -9,12 +9,14 @@ export default function withVisibilityHandling(WrappedComponent: typeof Popover,
     return (props: PopoverProps): JSX.Element => {
         const [initialized, setInitialized] = useState<boolean>(false);
         const [visible, setVisible] = useState<boolean>(false);
-        let { overlayClassName } = props;
-        if (typeof overlayClassName !== 'string') overlayClassName = '';
+        const { overlayClassName, ...rest } = props;
+        const overlayClassNames = typeof overlayClassName === 'string' ? overlayClassName.split(/\s+/) : [];
 
-        overlayClassName += ` cvat-${popoverType}-popover`;
+        const popoverClassName = `cvat-${popoverType}-popover`;
+        overlayClassNames.push(popoverClassName);
         if (visible) {
-            overlayClassName += ` cvat-${popoverType}-popover-visible`;
+            const visiblePopoverClassName = `cvat-${popoverType}-popover-visible`;
+            overlayClassNames.push(visiblePopoverClassName);
         }
 
         const callback = (event: Event): void => {
@@ -25,10 +27,19 @@ export default function withVisibilityHandling(WrappedComponent: typeof Popover,
 
         return (
             <WrappedComponent
-                {...props}
-                overlayClassName={overlayClassName.trim()}
+                {...rest}
+                trigger={visible ? 'click' : 'hover'}
+                overlayClassName={overlayClassNames.join(' ').trim()}
                 onVisibleChange={(_visible: boolean) => {
-                    if (!_visible) setVisible(false);
+                    if (!_visible) {
+                        setVisible(false);
+                    } else {
+                        // Hide other popovers
+                        const element = window.document.getElementsByClassName(`${popoverClassName}`)[0];
+                        if (element) {
+                            element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+                        }
+                    }
                     if (!initialized) {
                         const self = window.document.getElementsByClassName(`cvat-${popoverType}-popover`)[0];
                         self?.addEventListener('animationend', callback);