👻 Convert single/multi filter toolbar controls to use pf5 select

[ibolton336]

• Resolves:

  • https://issues.redhat.com/browse/MTA-1872
  • https://issues.redhat.com/browse/MTA-467

• Upgrade our usage of the PF select component to the pf 5 supported version.

[sjd78]

Some problems I found playing with the new filter toolbars:

• Deselecting an item in a filter list doesn't work / each time you click the same entry, another chip is added

  • application inventory page, with multiple applications available
  • open the name filter dropdown with or without filter text
  • click to select a name
  • name cannot be unselected here, only by clicking the x in the name chips list

• The filter type drop down does not auto-close

• If the multiselect filter select drop down opens from the twistee, keyboard focus is left on the checkbox. But on selecting an item (space bar on the checkbox), focus goes back to the filter input box and any further attempt to select items with the spacebar actually types in the filter and changes the list. Only hitting enter will allow selecting a second item, but this also closes the dropdown.

For example:

screencast-localhost_9000-2024.02.13-13_24_54.mp4

[sjd78]

This review is just on the single select control SelectFilterControl. The control looks and works ok.

I have some suggestions to simplify the code in SelectFilterControl.

[ibolton336]

Some problems I found playing with the new filter toolbars:

• Deselecting an item in a filter list doesn't work / each time you click the same entry, another chip is added

  • application inventory page, with multiple applications available
  • open the name filter dropdown with or without filter text
  • click to select a name
  • name cannot be unselected here, only by clicking the x in the name chips list

• The filter type drop down does not auto-close

• If the multiselect filter select drop down opens from the twistee, keyboard focus is left on the checkbox. But on selecting an item (space bar on the checkbox), focus goes back to the filter input box and any further attempt to select items with the spacebar actually types in the filter and changes the list. Only hitting enter will allow selecting a second item, but this also closes the dropdown.

For example:

screencast-localhost_9000-2024.02.13-13_24_54.mp4

Cleaned things up a bit to more closely match this example https://www.patternfly.org/components/menus/select#multiple-typeahead-with-checkboxes & fixed most of the bugs you mentioned.

[sjd78]

I've only looked at SelectFilterControl so far in this version of changes. I spent a bunch of time checking out the filter category selectOptions data against the PF5 SelectOption data. Looks like a small change could close the data gaps...

I'll have a look at the Multiselect behavior then code next.

[djzager]

ack