Bug - DualListSelector - Add/remove button doesn't work fine if search is used

[christoph-jerolimov]

Originally found in a code review by @sanketpathak openshift/console#12159 (comment)

Describe the problem
DualListSelector doesn't work correctly when the available and chosen option lists are searchable (prop isSearchable) and the user enters a filter and moves the elements to the other side and then back again.

How do you reproduce the problem?
The problem could be reproduced on the Dual List demo page in the "Basic with search" demo: https://www.patternfly.org/v4/components/dual-list-selector/#basic-with-search

Or the standalone example: https://www.patternfly.org/v4/components/dual-list-selector/react/basic-with-search/

Steps to reproduce the issue:

1. Start with all 4 options on the left side, both search fields are empty.
2. Enter "option" (or "option 1") into the right search field (chosen option)
3. Press "Add all" (») to move all elements to the right side
   1. alternative: select one or more option and press "Add" (›) to move just these options to the right side
4. Press "Remove all" («) to move all options to the left side again. 🐛 But nothing happens.

broken.mp4

It's working fine when you first move the elements to the right side and then filter the options.

working.mp4

The other direction has the same issue.

Expected behavior
The buttons "Add all" (») and "Remove all" («) should also work if the user first enters a search term and then move options from the left to the right side and then back again.

Is this issue blocking you?
Don't know a workaround other than disabling the search.

It might be possible to call onFilterUpdate of DualListSelector after any onChange. 🤷‍♂️

What is your environment?

• OS: Fedora Linux 35
• Browser: Chrome 105

What is your product and what release date are you targeting?
OpenShift Console / ODC

[christoph-jerolimov]

Opened a PR to fix this: #8269