From 775e43c20969e288b98bbc03460aa0a7c8b7b368 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:45:25 -0500
Subject: [PATCH] feat(applauncher): replaced favorites input with search input
 (#8293)

* feat(applauncher): replace input with search input

* fix bug in onToggle

* remove search button for consistency
---
 .../ApplicationLauncher/ApplicationLauncher.tsx        | 10 ++--------
 .../ApplicationLauncher/ApplicationLauncherItem.tsx    |  1 +
 .../examples/ApplicationLauncherFavoritesAndSearch.tsx |  5 ++++-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
index 300b8e3d751..fbdd6548ce8 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
@@ -10,6 +9,7 @@ import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
+import { SearchInput } from '../SearchInput';
 
 export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
@@ -93,13 +93,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
           customChild={
-            <input
-              type="search"
-              className={css(formStyles.formControl)}
-              placeholder={searchPlaceholderText}
-              onChange={e => onSearch(e.target.value)}
-              {...searchProps}
-            ></input>
+            <SearchInput placeholder={searchPlaceholderText} onChange={value => onSearch(value)} {...searchProps} />
           }
         ></ApplicationLauncherItem>
       </div>
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
index 98db6da18e6..28854b1d579 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
@@ -30,6 +30,7 @@ export interface ApplicationLauncherItemProps {
   ariaIsNotFavoriteLabel?: string;
   /** ID of the item. Required for tracking favorites. */
   id?: string;
+  /** Custom item rendering that receives the ApplicationLauncherContext */
   customChild?: React.ReactNode;
   /** Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. */
   enterTriggersArrowDown?: boolean;
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
index b8c255369fe..2f3c13e5376 100644
--- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
@@ -40,7 +40,10 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+    setFilteredItems(null);
+  };
 
   const onFavorite = (itemId: string, isFavorite: boolean) => {
     let updatedFavorites: string[] = [...favorites, itemId];