search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
111 stars 78 forks source link

Toolbar+Dropdown issue with dynamic values #3454

Open fernandoabel opened 1 month ago

fernandoabel commented 1 month ago

Package name(s)

Core (@salt-ds/core), Lab (@salt-ds/lab)

Package version(s)

@salt-ds/core -> 1.24.0 @salt-ds/lab -> 1.0.0-alpha.44

Description

The Dropbox is not loading dynamic Options properly when used inside Toolbar and ToolbarField.

Our application is currently on React 16 (I haven't tested with React 18 as we need still to upgrade). Since we support React 16 (and need to for compatibility with UITK), this needs to be fixed.

(Note: reporting this on behalf of an internal consumer, so adding the "community" label)

Steps to reproduce I have created the scenario in CodeSandBox below, where I represent the usage of Dropdown inside and outside the toolbar, and the differences in behaviour.

Error reproduced in CodeSandBox: https://codesandbox.io/p/sandbox/combobox-issue-forked-j2rsd7

Steps to reproduce

No response

Expected behavior

No response

Operating system

Browser

Are you a JPMorgan Chase & Co. employee?

joshwooding commented 1 month ago

Hi, this seems to be a limitation of Toolbar. ToolbarField clones its children, which breaks Dropdown. If you create a component without children, it works (https://codesandbox.io/p/sandbox/toolbar-dropdown-issue-with-dynamic-values-forked-vs75qq). The toolbar is in labs and not on the site, so we don't recommend using it, but hopefully, this helps.