From ddac8ccbbb7230bcc3ca62389be51f0a6edb7028 Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Fri, 26 Sep 2025 14:16:34 +0300
Subject: [PATCH 1/2] fix(ui): update the visuals of the inline search for the
 hash/list/set keys in the browser

- make the search input to fill in all the available width
- bring back the "onBlur" behavior that should close the search if you go away without typiing anything

re #RI-7542
---
 .../TableColumnSearchTrigger.spec.tsx         | 44 +++++++++++++++++++
 .../TableColumnSearchTrigger.tsx              | 11 ++++-
 .../styles.module.scss                        |  2 +-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.spec.tsx b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.spec.tsx
index 9c8f5fb8a3..d4962cce99 100644
--- a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.spec.tsx
+++ b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.spec.tsx
@@ -20,4 +20,48 @@ describe('TableColumnSearchTrigger', () => {
     })
     expect(searchInput).toHaveValue('*1*')
   })
+
+  it('should call "handleOpenState" on search blur if input is empty', () => {
+    const handleOpenState = jest.fn()
+
+    render(
+      <TableColumnSearchTrigger
+        {...instance(mockedProps)}
+        isOpen
+        handleOpenState={handleOpenState}
+      />,
+    )
+
+    const searchInput = screen.getByTestId('search')
+    expect(searchInput).toBeInTheDocument()
+    expect(searchInput).toHaveValue('')
+
+    fireEvent.blur(searchInput)
+    expect(handleOpenState).toHaveBeenCalledWith(false)
+  })
+
+  it('should not call "handleOpenState" on search blur if input has value', () => {
+    const handleOpenState = jest.fn()
+
+    render(
+      <TableColumnSearchTrigger
+        {...instance(mockedProps)}
+        isOpen
+        handleOpenState={handleOpenState}
+      />,
+    )
+
+    const searchInput = screen.getByTestId('search')
+    expect(searchInput).toBeInTheDocument()
+    expect(searchInput).toHaveValue('')
+
+    fireEvent.change(searchInput, {
+      target: { value: '*1*' },
+    })
+
+    expect(searchInput).toHaveValue('*1*')
+
+    fireEvent.blur(searchInput)
+    expect(handleOpenState).not.toHaveBeenCalled()
+  })
 })
diff --git a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
index 6cbe55c0f3..0aab8b91cc 100644
--- a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
+++ b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
@@ -58,6 +58,14 @@ const TableColumnSearchTrigger = (props: Props) => {
     }
   }
 
+  const handleOnBlur = (e?: React.FocusEvent<HTMLInputElement>) => {
+    const target = e?.target as HTMLInputElement
+
+    if (!target.value) {
+      handleOpenState(false)
+    }
+  }
+
   return (
     <div style={{ paddingRight: 10 }}>
       <IconButton
@@ -72,13 +80,14 @@ const TableColumnSearchTrigger = (props: Props) => {
       >
         <SearchInput
           onKeyDown={onKeyDown}
-          // onBlur={handleOnBlur}
+          onBlur={handleOnBlur}
           ref={setInputEl}
           name={fieldName}
           placeholder="Search"
           value={value || ''}
           onChange={handleChangeValue}
           data-testid="search"
+          style={{ width: '100%' }}
         />
       </div>
     </div>
diff --git a/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss b/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss
index 4033818b85..481825fd8b 100644
--- a/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss
+++ b/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss
@@ -7,6 +7,6 @@
   right: 0;
   top: 0;
   bottom: 0;
-  padding: 0;
+  padding: 8px;
   align-items: center;
 }

From 11f986672f9d4655e3c41c8699a889da77a81fa2 Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Mon, 29 Sep 2025 10:16:13 +0300
Subject: [PATCH 2/2] refactor(ui): make the event handler more clear

re #RI-7542
---
 .../TableColumnSearchTrigger.tsx                          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
index 0aab8b91cc..93a281a93f 100644
--- a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
+++ b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx
@@ -52,14 +52,14 @@ const TableColumnSearchTrigger = (props: Props) => {
     }
   }
 
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === keys.ENTER) {
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === keys.ENTER) {
       handleApply(value)
     }
   }
 
-  const handleOnBlur = (e?: React.FocusEvent<HTMLInputElement>) => {
-    const target = e?.target as HTMLInputElement
+  const handleOnBlur = (event?: React.FocusEvent<HTMLInputElement>) => {
+    const target = event?.target as HTMLInputElement
 
     if (!target.value) {
       handleOpenState(false)