Package

Carbon for IBM Products

Description

Multiselect in data grid flyout filter is not working as expected when user clicks on clear all options (X) button. It's fetching undefined value in itemsSelected but instead it should be an empty array if there is no data.

Seems like the bug is Here:
[https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-produc[…]mponents/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js](https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js#L376)

the onChange function tries to map undefined selectedItems after the user clicks the button to clear selection.

Component(s) impacted

Datagrid with flyout filter

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.38.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Security

CodeSandbox or Stackblitz example

https://codesandbox.io/p/devbox/heuristic-chatelet-mz58k3?file=%2Fsrc%2FExample%2FExample.jsx%3A123%2C21&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw65h46l00083b6jsa4bohyv%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw65h46k00033b6j9yhgcdpv%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw65h46k00053b6js921w9uq%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw65h46k00073b6j92fiqbrp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw65h46k00033b6j9yhgcdpv%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw65h46k00023b6j9zyyz0kr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FExample%252FExample.jsx%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A123%252C%2522startColumn%2522%253A21%252C%2522endLineNumber%2522%253A123%252C%2522endColumn%2522%253A21%257D%255D%257D%255D%252C%2522id%2522%253A%2522clw65h46k00033b6j9yhgcdpv%2522%252C%2522activeTabId%2522%253A%2522clw65h46k00023b6j9zyyz0kr%2522%257D%252C%2522clw65h46k00073b6j92fiqbrp%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw65h46k00063b6j0vhb3bkc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clw65h46k00073b6j92fiqbrp%2522%252C%2522activeTabId%2522%253A%2522clw65h46k00063b6j0vhb3bkc%2522%257D%252C%2522clw65h46k00053b6js921w9uq%2522%253A%257B%2522id%2522%253A%2522clw65h46k00053b6js921w9uq%2522%252C%2522activeTabId%2522%253A%2522clw7xgq7d00hu3b6ixkky829p%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw65h46k00043b6j8y99xtjb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clw7xgq7d00hu3b6ixkky829p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clw7xgq8200hjdjf08nem6deo%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce the issue (if applicable)

1. Open the Multiselect from flyout filter and select any option.
2. Now, click on the X button near to the selected count.
3. You will get the error in console.

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues