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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected] For further information, visit: https://activemq.apache.org/contact
