Repository: provectus/kafka-ui
Issue: Dropdown list of partitions shrinks in Search line for Messages
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
(A clear and concise description of what the bug is.)
On the tab Topic`s Messages the dropdown list of Partitions shrinks and jumps to the left when unselecting checkboxes.

**Set up**
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
http://redesign.internal.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topics
2. Choose some topic
3. Go to tab Messages
4. In the Search line at field Partitions unselect checkbox i.g. Select All
5. Observe: the dropdown list shrinks and jumps to the left

**Expected behavior**
(A clear and concise description of what you expected to happen)
The dimension of the dropdown list doesn`t change, the list doesn't jump

**Screenshots**
(If applicable, add screenshots to help explain your problem)
![image](https://user-images.githubusercontent.com/92585878/145570999-045f8d08-c651-47c1-94c6-afa895c2a185.png)
![image](https://user-images.githubusercontent.com/92585878/145571101-4166c466-7365-4fd9-925b-a20d84412814.png)


**Additional context**
(Add any other context about the problem here)
Worked correctly before the redesign https://www.kafka-ui.provectus.io/ui 
Maybe the order of search boxes was more suitable because if all checkboxes of partitions were unselected the search boxes for Seek Type, Offset/Timestamp disappeared.


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts
index 3b67922fdb1..0243519e8f2 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts
@@ -16,16 +16,6 @@ export const FiltersWrapper = styled.div`
       width: 10%;
     }
   }
-
-  & .multi-select {
-    height: 32px;
-    & > .dropdown-container {
-      height: 32px;
-      & > .dropdown-heading {
-        height: 32px;
-      }
-    }
-  }
 `;
 
 export const FilterInputs = styled.div`
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index aa29d078d35..a59061185f4 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@@ -13,7 +13,7 @@ import * as React from 'react';
 import { omitBy } from 'lodash';
 import { useHistory, useLocation } from 'react-router';
 import DatePicker from 'react-datepicker';
-import MultiSelect from 'react-multi-select-component';
+import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { TopicName, ClusterName } from 'redux/interfaces';
@@ -22,14 +22,7 @@ import Input from 'components/common/Input/Input';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 
-import {
-  FilterInputs,
-  FiltersMetrics,
-  FiltersWrapper,
-  Metric,
-  MetricsIcon,
-  SeekTypeSelectorWrapper,
-} from './Filters.styled';
+import * as S from './Filters.styled';
 import {
   filterOptions,
   getOffsetFromSeekToParam,
@@ -235,9 +228,9 @@ const Filters: React.FC<FiltersProps> = ({
   }, [seekDirection]);
 
   return (
-    <FiltersWrapper>
+    <S.FiltersWrapper>
       <div>
-        <FilterInputs>
+        <S.FilterInputs>
           <Input
             inputSize="M"
             id="searchText"
@@ -248,7 +241,7 @@ const Filters: React.FC<FiltersProps> = ({
             onChange={({ target: { value } }) => setQuery(value)}
           />
           {isSeekTypeControlVisible && (
-            <SeekTypeSelectorWrapper>
+            <S.SeekTypeSelectorWrapper>
               <Select
                 id="selectSeekType"
                 onChange={({ target: { value } }) =>
@@ -280,7 +273,7 @@ const Filters: React.FC<FiltersProps> = ({
                   placeholderText="Select timestamp"
                 />
               )}
-            </SeekTypeSelectorWrapper>
+            </S.SeekTypeSelectorWrapper>
           )}
           <MultiSelect
             options={partitions.map((p) => ({
@@ -315,7 +308,7 @@ const Filters: React.FC<FiltersProps> = ({
               Submit
             </Button>
           )}
-        </FilterInputs>
+        </S.FilterInputs>
         <Select
           selectSize="M"
           onChange={(e) => toggleSeekDirection(e.target.value)}
@@ -325,28 +318,28 @@ const Filters: React.FC<FiltersProps> = ({
           <option value={SeekDirection.BACKWARD}>Newest first</option>
         </Select>
       </div>
-      <FiltersMetrics>
+      <S.FiltersMetrics>
         <p style={{ fontSize: 14 }}>{isFetching && phaseMessage}</p>
-        <Metric title="Elapsed Time">
-          <MetricsIcon>
+        <S.Metric title="Elapsed Time">
+          <S.MetricsIcon>
             <i className="far fa-clock" />
-          </MetricsIcon>
+          </S.MetricsIcon>
           <span>{Math.max(elapsedMs || 0, 0)} ms</span>
-        </Metric>
-        <Metric title="Bytes Consumed">
-          <MetricsIcon>
+        </S.Metric>
+        <S.Metric title="Bytes Consumed">
+          <S.MetricsIcon>
             <i className="fas fa-arrow-down" />
-          </MetricsIcon>
+          </S.MetricsIcon>
           <BytesFormatted value={bytesConsumed} />
-        </Metric>
-        <Metric title="Messages Consumed">
-          <MetricsIcon>
+        </S.Metric>
+        <S.Metric title="Messages Consumed">
+          <S.MetricsIcon>
             <i className="far fa-file-alt" />
-          </MetricsIcon>
+          </S.MetricsIcon>
           <span>{messagesConsumed} messages</span>
-        </Metric>
-      </FiltersMetrics>
-    </FiltersWrapper>
+        </S.Metric>
+      </S.FiltersMetrics>
+    </S.FiltersWrapper>
   );
 };
 
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap
index 188c378b7c2..03286ea2e18 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap
@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filters component matches the snapshot 1`] = `
+.c9 {
+  min-width: 200px;
+  height: 32px;
+  font-size: 14px;
+}
+
+.c9 > .dropdown-container {
+  height: 32px;
+}
+
+.c9 > .dropdown-container > .dropdown-heading {
+  height: 32px;
+}
+
 .c3 {
   position: absolute;
   top: 50%;
@@ -206,7 +220,7 @@ exports[`Filters component matches the snapshot 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -232,27 +246,27 @@ exports[`Filters component matches the snapshot 1`] = `
   height: 32px;
 }
 
-.c9:hover:enabled {
+.c10:hover:enabled {
   background: #E3E6E8;
   color: #171A1C;
   cursor: pointer;
 }
 
-.c9:active:enabled {
+.c10:active:enabled {
   background: #D5DADD;
   color: #171A1C;
 }
 
-.c9:disabled {
+.c10:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.c9 a {
+.c10 a {
   color: white;
 }
 
-.c9 i {
+.c10 i {
   margin-right: 7px;
 }
 
@@ -284,18 +298,6 @@ exports[`Filters component matches the snapshot 1`] = `
   width: 10%;
 }
 
-.c0 .multi-select {
-  height: 32px;
-}
-
-.c0 .multi-select > .dropdown-container {
-  height: 32px;
-}
-
-.c0 .multi-select > .dropdown-container > .dropdown-heading {
-  height: 32px;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -359,7 +361,7 @@ exports[`Filters component matches the snapshot 1`] = `
   outline: none;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -377,7 +379,7 @@ exports[`Filters component matches the snapshot 1`] = `
   padding-bottom: 16px;
 }
 
-.c11 {
+.c12 {
   color: #73848C;
   font-size: 12px;
   display: -webkit-box;
@@ -386,7 +388,7 @@ exports[`Filters component matches the snapshot 1`] = `
   display: flex;
 }
 
-.c12 {
+.c13 {
   color: #171A1C;
   padding-right: 6px;
   height: 12px;
@@ -449,7 +451,7 @@ exports[`Filters component matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="rmsc multi-select"
+            class="rmsc c9"
           >
             <div
               aria-labelledby="Select partitions"
@@ -510,7 +512,7 @@ exports[`Filters component matches the snapshot 1`] = `
             </div>
           </div>
           <button
-            class="c9"
+            class="c10"
             style="font-weight: 500;"
             type="submit"
           >
@@ -537,17 +539,17 @@ exports[`Filters component matches the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c10"
+        class="c11"
       >
         <p
           style="font-size: 14px;"
         />
         <div
-          class="c11"
+          class="c12"
           title="Elapsed Time"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="far fa-clock"
@@ -559,11 +561,11 @@ exports[`Filters component matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c11"
+          class="c12"
           title="Bytes Consumed"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="fas fa-arrow-down"
@@ -574,11 +576,11 @@ exports[`Filters component matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c11"
+          class="c12"
           title="Messages Consumed"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="far fa-file-alt"
@@ -596,7 +598,21 @@ exports[`Filters component matches the snapshot 1`] = `
 
 exports[`Filters component when fetching matches the snapshot 1`] = `
 <body>
-  .c3 {
+  .c9 {
+  min-width: 200px;
+  height: 32px;
+  font-size: 14px;
+}
+
+.c9 > .dropdown-container {
+  height: 32px;
+}
+
+.c9 > .dropdown-container > .dropdown-heading {
+  height: 32px;
+}
+
+.c3 {
   position: absolute;
   top: 50%;
   line-height: 0;
@@ -801,7 +817,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -827,27 +843,27 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   height: 32px;
 }
 
-.c9:hover:enabled {
+.c10:hover:enabled {
   background: #E3E6E8;
   color: #171A1C;
   cursor: pointer;
 }
 
-.c9:active:enabled {
+.c10:active:enabled {
   background: #D5DADD;
   color: #171A1C;
 }
 
-.c9:disabled {
+.c10:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.c9 a {
+.c10 a {
   color: white;
 }
 
-.c9 i {
+.c10 i {
   margin-right: 7px;
 }
 
@@ -879,18 +895,6 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   width: 10%;
 }
 
-.c0 .multi-select {
-  height: 32px;
-}
-
-.c0 .multi-select > .dropdown-container {
-  height: 32px;
-}
-
-.c0 .multi-select > .dropdown-container > .dropdown-heading {
-  height: 32px;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -954,7 +958,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   outline: none;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -972,7 +976,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   padding-bottom: 16px;
 }
 
-.c11 {
+.c12 {
   color: #73848C;
   font-size: 12px;
   display: -webkit-box;
@@ -981,7 +985,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
   display: flex;
 }
 
-.c12 {
+.c13 {
   color: #171A1C;
   padding-right: 6px;
   height: 12px;
@@ -1043,7 +1047,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="rmsc multi-select"
+            class="rmsc c9"
           >
             <div
               aria-labelledby="Select partitions"
@@ -1104,7 +1108,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
             </div>
           </div>
           <button
-            class="c9"
+            class="c10"
             style="font-weight: 500;"
             type="button"
           >
@@ -1131,17 +1135,17 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c10"
+        class="c11"
       >
         <p
           style="font-size: 14px;"
         />
         <div
-          class="c11"
+          class="c12"
           title="Elapsed Time"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="far fa-clock"
@@ -1153,11 +1157,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c11"
+          class="c12"
           title="Bytes Consumed"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="fas fa-arrow-down"
@@ -1168,11 +1172,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
           </span>
         </div>
         <div
-          class="c11"
+          class="c12"
           title="Messages Consumed"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <i
               class="far fa-file-alt"
diff --git a/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts b/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts
new file mode 100644
index 00000000000..ea596585b0a
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import ReactMultiSelect from 'react-multi-select-component';
+
+const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
+  min-width: ${({ minWidth }) => minWidth || '200px;'};
+  height: 32px;
+  font-size: 14px;
+
+  & > .dropdown-container {
+    height: 32px;
+
+    & > .dropdown-heading {
+      height: 32px;
+    }
+  }
+`;
+
+export default MultiSelect;


Test patch: