fix(examples): make sure examples with SearchInput have onClear (#12044)

* fix(examples): make sure examples with SearchInput have onClear

Signed-off-by: gitdallas <[email protected]>

* stop propagation in instances of onclear closing menus

Signed-off-by: gitdallas <[email protected]>

---------

Signed-off-by: gitdallas <[email protected]>

Author: gitdallas

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('')}
                     />
                   </MenuSearchInput>
                 </MenuSearch>

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('')}
           />
         </MenuSearchInput>
       </MenuSearch>

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 = (
     <Fragment>
       <ToolbarItem>
-        <SearchInput aria-label="Items example search input" />
+        <SearchInput
+          aria-label="Items example search input"
+          value={searchValue}
+          onChange={(_event, value) => setSearchValue(value)}
+          onClear={() => setSearchValue('')}
+        />
       </ToolbarItem>
       <ToolbarItem>
         <Button variant="secondary">Action</Button>

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 = (
     <Fragment>
       <ToolbarItem>
-        <SearchInput aria-label="Items example search input" />
+        <SearchInput
+          aria-label="Items example search input"
+          value={searchValue}
+          onChange={(_event, value) => setSearchValue(value)}
+          onClear={() => setSearchValue('')}
+        />
       </ToolbarItem>
       <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator" />
       <ToolbarItem>
-        <Button variant="primary">Action</Button>
+        <Button variant="primary">Action2</Button>
       </ToolbarItem>
     </Fragment>
   );

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 = () => {
         <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
           <ToolbarContent>
             <ToolbarItem>
-              <SearchInput aria-label="Sticky example search input" />
+              <SearchInput
+                aria-label="Sticky example search input"
+                value={searchValue}
+                onChange={(_event, value) => setSearchValue(value)}
+                onClear={() => setSearchValue('')}
+              />
             </ToolbarItem>
             <ToolbarItem alignSelf="center">
               <Checkbox

packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx

@@ -78,6 +78,10 @@ export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
             value={input}
             aria-label="Filter menu items"
             onChange={(_event, value) => handleTextInputChange(value)}
+            onClear={(event) => {
+              event.stopPropagation();
+              handleTextInputChange('');
+            }}
           />
         </MenuSearchInput>
       </MenuSearch>

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 = () =>
               </Tooltip>
             </ToolbarItem>
             <ToolbarItem>
-              <SearchInput aria-label="search input example" />
+              <SearchInput
+                aria-label="search input example"
+                value={searchValue}
+                onChange={(_event, value) => setSearchValue(value)}
+                onClear={() => setSearchValue('')}
+              />
             </ToolbarItem>
             <ToolbarItem>
               <Button variant="secondary">Action</Button>

packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -74,6 +74,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   const [refFullOptions, setRefFullOptions] = useState<Element[]>();
   const [favorites, setFavorites] = useState<string[]>([]);
   const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const [searchValue, setSearchValue] = useState('');
   const menuRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
 
@@ -297,6 +298,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   };
 
   const onTextChange = (textValue: string) => {
+    setSearchValue(textValue);
     if (textValue === '') {
       setFilteredIds(['*']);
       return;
@@ -331,7 +333,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuSearchInput>
-        <SearchInput aria-label="Filter menu items" onChange={(_event, value) => onTextChange(value)} />
+        <SearchInput
+          aria-label="Filter menu items"
+          value={searchValue}
+          onChange={(_event, value) => onTextChange(value)}
+          onClear={(event) => {
+            event.stopPropagation();
+            onTextChange('');
+          }}
+        />
       </MenuSearchInput>
       <Divider />
       <MenuContent>

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')}
               />
             </MenuSearchInput>
           </MenuSearch>