Combobox bug when options change after first render

[heswell]

Package name(s)

Core (@salt-ds/core)

Package version(s)

1.27.1

Description

In a ComboBox where options list is initially empty and populated only when user begins to type , DownArrow navigation does not work. Looks like it is because Option registration in ListControlState mutates a structure held in a ref, so registrations after initial render do update the options list but do not trigger a re-render. The options count referenced in ComboBox.tsx remains 0 so ArrowDown fails

Steps to reproduce

create a ComboBox where the options are created dynamically only after the user types into the combo. Then try to navigate with ArrowDown

Expected behavior

The first Item should be highlighted

Operating system

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Browser

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge

Are you a JPMorgan Chase & Co. employee?

• [ ] I am an employee of JPMorgan Chase & Co.

[alexlostorto]

Hi @heswell! 🙂

Thanks for raising this issue.

Steps to Reproduce 🚧

I would like to reproduce the error on my laptop (Windows) to confirm the issue, but I'm new to React and JSX.

Could you provide a repo to clone or the code I should include?

Questions 🤔

1) Why would the options need to be created dynamically? Perhaps you could have separate combo boxes with different sets of options and depending on a condition display a certain one?

Possible Solution 🛠

Without adding options dynamically, the combo boxes work as expected in the examples they provide, so I presume that the issue is due to the component's state not being updated after the options are added.

Source code for the ComboBox component is here: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/combo-box/ComboBox.tsx