From ff85fe00060ef8e8bf8d15bcf1ad6b03bfd6d46f Mon Sep 17 00:00:00 2001
From: Dmitry Kalinin <dmitry.kalinin@intel.com>
Date: Wed, 20 Jan 2021 16:55:41 +0300
Subject: [PATCH] Fixed styles for filters select (#2614)

* Fixed styles for filters select

* Added CHANGELOG

* Aborted style changes

* Aborted style changes

* Aborted version

* Fixed couple of bugs

* Updated version

Co-authored-by: Boris Sekachev <boris.sekachev@yandex.ru>
---
 CHANGELOG.md                                  |  1 +
 cvat-ui/package-lock.json                     |  2 +-
 cvat-ui/package.json                          |  2 +-
 .../annotations-filters-input.tsx             | 22 ++++++++++++++-----
 .../components/annotation-page/styles.scss    | 13 +++++------
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8c17cf0..c37b869b 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
 - Kibana startup initialization (<https://github.com/openvinotoolkit/cvat/pull/2659>)
 - The cursor jumps to the end of the line when renaming a task (<https://github.com/openvinotoolkit/cvat/pull/2669>)
 - SSLCertVerificationError when remote source is used (<https://github.com/openvinotoolkit/cvat/pull/2683>)
+- Fixed filters select overflow (<https://github.com/openvinotoolkit/cvat/pull/2614>)
 
 ### Security
 
diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
index 956826d7..b5734f54 100644
--- a/cvat-ui/package-lock.json
+++ b/cvat-ui/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
index fe8617c0..5dcd4f04 100644
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
diff --git a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
index 2bd2664c..92276391 100644
--- a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
+++ b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -120,7 +120,8 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
         changeAnnotationsFilters,
     } = props;
 
-    const [underCursor, setUnderCursor] = useState(false);
+    const [underCursor, setUnderCursor] = useState<boolean>(false);
+    const [dropdownVisible, setDropdownVisible] = useState<boolean>(true);
 
     return (
         <Select
@@ -128,20 +129,27 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
             allowClear
             value={annotationsFilters}
             mode='tags'
+            disabled={!dropdownVisible}
             style={{ width: '100%' }}
             placeholder={
                 underCursor ? (
                     <>
                         <Tooltip title='Click to open help' mouseLeaveDelay={0}>
                             <FilterOutlined
-                                onClick={(e: React.MouseEvent) => {
-                                    e.stopPropagation();
+                                style={{ pointerEvents: 'all' }}
+                                onClick={() => {
+                                    // also opens the select dropdown
+                                    // looks like it is done on capturing state
+                                    // so we cannot cancel it somehow via the event handling
+                                    // to avoid it we use also onMouseEnter, onMouseLeave below
                                     Modal.info({
                                         width: 700,
                                         title: 'How to use filters?',
                                         content: filtersHelpModalContent(searchForwardShortcut, searchBackwardShortcut),
                                     });
                                 }}
+                                onMouseEnter={() => setDropdownVisible(false)}
+                                onMouseLeave={() => setDropdownVisible(true)}
                             />
                         </Tooltip>
                     </>
@@ -158,7 +166,11 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
         >
             {annotationsFiltersHistory.map(
                 (element: string): JSX.Element => (
-                    <Select.Option key={element} value={element} className='cvat-annotations-filters-input-history-element'>
+                    <Select.Option
+                        key={element}
+                        value={element}
+                        className='cvat-annotations-filters-input-history-element'
+                    >
                         {element}
                     </Select.Option>
                 ),
diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/cvat-ui/src/components/annotation-page/styles.scss
index c14da8d9..38e8b0d3 100644
--- a/cvat-ui/src/components/annotation-page/styles.scss
+++ b/cvat-ui/src/components/annotation-page/styles.scss
@@ -280,15 +280,14 @@
     }
 }
 
-.cvat-annotations-filters-input.ant-select > div {
-    height: 32px;
-
-    > div {
+.cvat-annotations-filters-input.ant-select {
+    > .ant-select-selector {
         height: 32px;
+        overflow: auto;
+    }
 
-        ul {
-            display: flex;
-        }
+    > .ant-select-clear {
+        right: 20px;
     }
 }