feat(applauncher): replaced favorites input with search input

[jenny-s51]

What: Closes #7212

[patternfly-build]

Preview: https://patternfly-react-pr-8293.surge.sh

A11y report: https://patternfly-react-pr-8293-a11y.surge.sh

[thatblindgeye]

I'm noticing a couple of issues, at least in the "with favorites and search" example.

• If I enter a value in the search input, close the launcher, and open it again, the search input is cleared but it's still filtering based on the previous search value
• Currently the clear icon cannot be navigated/activated via keyboard. feat(DualListSelector, SearchInput): use SearchInput in DLS, add type prop to SearchInput #8040 had a similar issue. Essentially both the value and onClear props for SearchInput need to be passed in for a navigable clear button to be rendered (doing so locally still an issue as Tab closes the app launcher, though)

Both of these issues are currently present, though. The first bullet I think would be good to fix up in the example, while the second bullet could be a followup depending whether it's straight forward or not.

EDIT: The second bullet would also depend if we want the clear button to be rendered. Right now in Chrome an <input type="search" renders an default icon for clearing the input (this isn't present in Firefox as far as I can tell)

[mcoker]

lgtm!

[mmenestr]

Just found one very small bug which is that I went to type in a search, then navigated away without deleting my input, and when I came back, it seemed like it was still taking into account what I typed, and therefore giving no results, even though what I had typed was no longer visible in the search input field.

I would have expected that it would either reset everything, remove my input and show me all results OR that it would retain the state in which I left it in (with my input still in there/visible, and the menu saying "no results found")

Screen.Recording.2022-10-28.at.9.47.53.AM.mov

[jenny-s51]

@thatblindgeye Thank you for that great feedback! I've fixed the bug with the toggle/search input filtering based on the previous value, and implemented @mmenestr suggestion to reset the input and show all the results when the App Launcher is toggled open again from the closed state.

For now, I've also removed the search input's "delete" button for consistency among browsers, until we have a solution for a tabbable delete button.

Regarding that tabbable delete button... I've spent the day investigating this and testing a whole bunch of different updates -- none of which I would say were very straightforward 😄 -- as we'd need to make a lot of component-level updates to the search logic of App Launcher.

Those updates would include:

• converting the class component to a function component
• Adding hooks that watch the search input
• Updating the favorites logic to display different states of the favorites menu depending on the state of the search input
• adding an onKeyDown event listener to prevent the App Launcher from closing (when there is a search input)

I have most of this work on a local branch already but a fully-functional solution will require more time and investigation.

Opened #8318 so we can prioritize it for an upcoming release!

[thatblindgeye]

@jenny-s51 🎉 thanks for making the update and looking into the tabbable clear button!