From 83f42ef85944de0aa7b6a19d3df02375da69ed18 Mon Sep 17 00:00:00 2001 From: gitdallas <5322142+gitdallas@users.noreply.github.com> Date: Tue, 7 Oct 2025 14:46:26 -0500 Subject: [PATCH 1/2] fix(examples): make sure examples with SearchInput have onClear Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> --- .../Menu/examples/MenuFilterDrilldown.tsx | 1 + .../examples/MenuFilteringWithSearchInput.tsx | 1 + .../Toolbar/examples/ToolbarContentWrap.tsx | 13 ++++++++++--- .../components/Toolbar/examples/ToolbarItems.tsx | 15 +++++++++++---- .../components/Toolbar/examples/ToolbarSticky.tsx | 10 ++++++++-- .../examples/InlineSearchFilterMenuDemo.tsx | 1 + .../DataListExpandableControlInToolbar.tsx | 8 +++++++- .../MastheadWithUtilitiesAndUserDropdownMenu.tsx | 9 ++++++++- .../src/components/demos/MenuDemo/MenuDemo.tsx | 1 + 9 files changed, 48 insertions(+), 11 deletions(-) diff --git a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx index 512db494d7c..ff9263dabe2 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx @@ -110,6 +110,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => { value={startInput} aria-label="Filter menu items" onChange={(_event, value) => handleStartTextInputChange(value)} + onClear={() => handleStartTextInputChange('')} /> diff --git a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx index af9bc152f98..48efc29c8c5 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx @@ -49,6 +49,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => { value={input} aria-label="Filter menu items" onChange={(_event, value) => handleTextInputChange(value)} + onClear={() => handleTextInputChange('')} /> diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx index 466de5c1cdb..14e6d3ebb97 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx @@ -1,12 +1,19 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core'; import { Button, SearchInput } from '@patternfly/react-core'; -export const ToolbarItems: React.FunctionComponent = () => { +export const ToolbarItems = () => { + const [searchValue, setSearchValue] = useState(''); + const items = ( - + setSearchValue(value)} + onClear={() => setSearchValue('')} + /> diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarItems.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarItems.tsx index 6d5ce0171c7..db6755f0381 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarItems.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarItems.tsx @@ -1,19 +1,26 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core'; import { Button, SearchInput } from '@patternfly/react-core'; -export const ToolbarItems: React.FunctionComponent = () => { +export const ToolbarItems = () => { + const [searchValue, setSearchValue] = useState(''); + const items = ( - + setSearchValue(value)} + onClear={() => setSearchValue('')} + /> - + ); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx index 1b8d1292e75..3ee2d58361d 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx @@ -1,9 +1,10 @@ import { Fragment, useState } from 'react'; import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core'; -export const ToolbarSticky: React.FunctionComponent = () => { +export const ToolbarSticky = () => { const [isSticky, setIsSticky] = useState(true); const [showEvenOnly, setShowEvenOnly] = useState(true); + const [searchValue, setSearchValue] = useState(''); const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array; @@ -13,7 +14,12 @@ export const ToolbarSticky: React.FunctionComponent = () => { - + setSearchValue(value)} + onClear={() => setSearchValue('')} + /> { value={input} aria-label="Filter menu items" onChange={(_event, value) => handleTextInputChange(value)} + onClear={() => handleTextInputChange('')} /> diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index 371720dfbce..8207842506e 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx @@ -38,6 +38,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () => const [isOpen2, setIsOpen2] = useState(false); const [isOpen3, setIsOpen3] = useState(false); const [allExpanded, setAllExpanded] = useState(false); + const [searchValue, setSearchValue] = useState(''); const onToggleAll = () => { setAllExpanded((prevAllExpanded) => !prevAllExpanded); @@ -103,7 +104,12 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () => - + setSearchValue(value)} + onClear={() => setSearchValue('')} + /> diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx index c93e739b8f5..8e4e4c90790 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx @@ -74,6 +74,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = const [refFullOptions, setRefFullOptions] = useState(); const [favorites, setFavorites] = useState([]); const [filteredIds, setFilteredIds] = useState(['*']); + const [searchValue, setSearchValue] = useState(''); const menuRef = useRef(null); const toggleRef = useRef(null); @@ -297,6 +298,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = }; const onTextChange = (textValue: string) => { + setSearchValue(textValue); if (textValue === '') { setFilteredIds(['*']); return; @@ -331,7 +333,12 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = // eslint-disable-next-line no-console console.log('selected', itemId)}> - onTextChange(value)} /> + onTextChange(value)} + onClear={() => onTextChange('')} + /> diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx index 2ede5594084..9fe00f979d8 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx @@ -273,6 +273,7 @@ export class MenuDemo extends Component { value={input} aria-label="filterable-example-with-text-input" onChange={(_event, value) => this.handleTextInputChange(value, 'input')} + onClear={() => this.handleTextInputChange('', 'input')} /> From c61825d538470f6714b5d98a6b00b1f31e0c04e9 Mon Sep 17 00:00:00 2001 From: gitdallas <5322142+gitdallas@users.noreply.github.com> Date: Thu, 9 Oct 2025 12:14:44 -0500 Subject: [PATCH 2/2] stop propagation in instances of onclear closing menus Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> --- .../CustomMenus/examples/InlineSearchFilterMenuDemo.tsx | 5 ++++- .../Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx index f408053c04d..033b142cf09 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx @@ -78,7 +78,10 @@ export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => { value={input} aria-label="Filter menu items" onChange={(_event, value) => handleTextInputChange(value)} - onClear={() => handleTextInputChange('')} + onClear={(event) => { + event.stopPropagation(); + handleTextInputChange(''); + }} /> diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx index 8e4e4c90790..8efdebdfb29 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx @@ -337,7 +337,10 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = aria-label="Filter menu items" value={searchValue} onChange={(_event, value) => onTextChange(value)} - onClear={() => onTextChange('')} + onClear={(event) => { + event.stopPropagation(); + onTextChange(''); + }} />