Repository: provectus/kafka-ui
Issue: Offset input disappears when the only partition is unselected
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Topic messages offset input disappears when the only partition is unselected

**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.)
-->
latest master


**Steps to Reproduce**
Steps to reproduce the behavior:

1. open up messages view
2. deselect the only partition
3. ???
4. profit

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->
<img width="711" alt="image" src="https://user-images.githubusercontent.com/1494347/164330994-94995b9e-aef3-43d7-81fe-fd90b88c60db.png">
<img width="566" alt="image" src="https://user-images.githubusercontent.com/1494347/164331356-7a291ad9-6d6a-4b9c-a8b5-525ced0eac0b.png">




**Additional context**
<!--
(Add any other context about the problem here)
-->


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.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index b6e6cf3e653..b0679486cef 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
@@ -357,42 +357,40 @@ const Filters: React.FC<FiltersProps> = ({
             value={query}
             onChange={({ target: { value } }) => setQuery(value)}
           />
-          {isSeekTypeControlVisible && (
-            <S.SeekTypeSelectorWrapper>
-              <Select
-                id="selectSeekType"
-                onChange={(option) => setCurrentSeekType(option as SeekType)}
-                value={currentSeekType}
-                selectSize="M"
-                minWidth="100px"
-                options={SeekTypeOptions}
+          <S.SeekTypeSelectorWrapper>
+            <Select
+              id="selectSeekType"
+              onChange={(option) => setCurrentSeekType(option as SeekType)}
+              value={currentSeekType}
+              selectSize="M"
+              minWidth="100px"
+              options={SeekTypeOptions}
+              disabled={isLive}
+            />
+            {currentSeekType === SeekType.OFFSET ? (
+              <Input
+                id="offset"
+                type="text"
+                inputSize="M"
+                value={offset}
+                className="offset-selector"
+                placeholder="Offset"
+                onChange={({ target: { value } }) => setOffset(value)}
                 disabled={isLive}
               />
-              {currentSeekType === SeekType.OFFSET ? (
-                <Input
-                  id="offset"
-                  type="text"
-                  inputSize="M"
-                  value={offset}
-                  className="offset-selector"
-                  placeholder="Offset"
-                  onChange={({ target: { value } }) => setOffset(value)}
-                  disabled={isLive}
-                />
-              ) : (
-                <DatePicker
-                  selected={timestamp}
-                  onChange={(date: Date | null) => setTimestamp(date)}
-                  showTimeInput
-                  timeInputLabel="Time:"
-                  dateFormat="MMMM d, yyyy HH:mm"
-                  className="date-picker"
-                  placeholderText="Select timestamp"
-                  disabled={isLive}
-                />
-              )}
-            </S.SeekTypeSelectorWrapper>
-          )}
+            ) : (
+              <DatePicker
+                selected={timestamp}
+                onChange={(date: Date | null) => setTimestamp(date)}
+                showTimeInput
+                timeInputLabel="Time:"
+                dateFormat="MMMM d, yyyy HH:mm"
+                className="date-picker"
+                placeholderText="Select timestamp"
+                disabled={isLive}
+              />
+            )}
+          </S.SeekTypeSelectorWrapper>
           <MultiSelect
             options={partitions.map((p) => ({
               label: `Partition #${p.partition.toString()}`,
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx
index 05d9eb0a461..d2a92c09e38 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx
@@ -35,14 +35,14 @@ describe('Messages', () => {
       setUpComponent();
     });
     it('should check default seekDirection if it actually take the value from the url', () => {
-      expect(screen.getByRole('listbox')).toHaveTextContent(
+      expect(screen.getAllByRole('listbox')[1]).toHaveTextContent(
         SeekDirectionOptionsObj[SeekDirection.FORWARD].label
       );
     });
 
     it('should check the SeekDirection select changes', () => {
-      const seekDirectionSelect = screen.getByRole('listbox');
-      const seekDirectionOption = screen.getByRole('option');
+      const seekDirectionSelect = screen.getAllByRole('listbox')[1];
+      const seekDirectionOption = screen.getAllByRole('option')[1];
 
       expect(seekDirectionOption).toHaveTextContent(
         SeekDirectionOptionsObj[SeekDirection.FORWARD].label
@@ -69,7 +69,7 @@ describe('Messages', () => {
       setUpComponent(
         searchParams.replace(SeekDirection.FORWARD, SeekDirection.BACKWARD)
       );
-      expect(screen.getByRole('listbox')).toHaveTextContent(
+      expect(screen.getAllByRole('listbox')[1]).toHaveTextContent(
         SeekDirectionOptionsObj[SeekDirection.BACKWARD].label
       );
     });


Test patch: