Improved maintanance of popups visibility

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bumped nuclio version to 1.5.16
 - 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
 

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": {

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);