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

@@ -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
 

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

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

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

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