(activemq-artemis-console) 02/04: ARTEMIS-5641 - Use useRef for filterValue

[an...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

andytaylor pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/activemq-artemis-console.git

commit 8c84eb7bc6749fb08b0b477a74bc911aea00985e
Author: GChuf <ga...@gmail.com>
AuthorDate: Mon Sep 1 14:42:46 2025 +0200

    ARTEMIS-5641 - Use useRef for filterValue
    
    This ensures no re-rendering of artemisFilter component for every change in the search bar.
    It also coincidentally fixes ARTEMIS-5512.
---
 .../src/table/ArtemisFilters.tsx                     | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisFilters.tsx b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisFilters.tsx
index 3b65452..8fd844c 100644
--- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisFilters.tsx
+++ b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisFilters.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Button, Select, SelectList, SelectOption, MenuToggleElement, MenuToggle, SearchInput, ToolbarItem } from '@patternfly/react-core';
 
 export type ArtemisFiltersProps = {
@@ -26,21 +26,23 @@ export type ArtemisFiltersProps = {
 };
 
 export const ArtemisFilters: React.FC<ArtemisFiltersProps> = ({ columns, operationOptions, initialFilter, onApplyFilter }) => {
+  const searchRef = useRef<HTMLInputElement>(null);
   const [filterColumn, setFilterColumn] = useState(
     columns.find(c => c.id === initialFilter.column)?.name
   );
   const [filterOperation, setFilterOperation] = useState(
     operationOptions.find(o => o.id === initialFilter.operation)?.name
   );
-  const [inputValue, setInputValue] = useState(initialFilter.input);
+
   const [columnOpen, setColumnOpen] = useState(false);
   const [operationOpen, setOperationOpen] = useState(false);
 
   const applyFilter = () => {
     const operation = operationOptions.find(operation => operation.name === filterOperation);
     const column = columns.find(column => column.name === filterColumn);
+    const filterValue = searchRef.current?.value ?? "";
     if (operation && column) {
-      onApplyFilter({ column: column.id, operation: operation.id, input: inputValue });
+      onApplyFilter({ column: column.id, operation: operation.id, input: filterValue });
     }
   }
 
@@ -90,18 +92,14 @@ export const ArtemisFilters: React.FC<ArtemisFiltersProps> = ({ columns, operati
 
       <ToolbarItem variant="search-filter" key="search=text">
         <SearchInput
-          aria-label="Search Text"
-          value={inputValue}
-          onChange={(_event, value) => setInputValue(value)}
-          onClear={() => {
-            setInputValue('');
-            applyFilter();
-          }}
+          ref={searchRef}
+          defaultValue=""
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               applyFilter();
             }
-          }}
+          }
+        }
         />
       </ToolbarItem>
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@activemq.apache.org
For additional commands, e-mail: commits-help@activemq.apache.org
For further information, visit: https://activemq.apache.org/contact