dropdown list for Combobox doesnt appear when we dynamically fetch api and display results.

[chunteck]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

We use the Combobox this way

<Form.Group props...>
      <Combobox
         menuList={returnedItems}  //response from the api
         onChangeInput={(val, _e) => {
            if (val.length >= 3) {
               dispatch(searchUsers(val));  //send an api
            }
         props...
         }} />

What we do is type 3 characters into the dropdown. Once the characters are typed, we see the api being fired, and a response is returned. However, we notice that the dropdown doesnt appear after the response is returned and populated into the returnedItems array.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-react are you using? CSR or SSR?

2.2.1

[clye-cog]

Hi @clukhei , my team and I are experiencing this issue as well

[clukhei]

Hi @clye-cog , the combobox was built for users to quickly filter through a static menu list to find their input value. This case sounds like a dynamic menu list which changes as the user inputs a more specific value, like an autocomplete or search bar. I need to take back with my team to discuss if this is a proper use case of a combobox.

Also need to think about how this kind of filtering will work in a multiselect combobox case.

[clye-cog]

Hi @clukhei , okay noted. I have logged a separate issue for my case as my team is using it as a static list but we have an api call that needs to be made to populate the list:

#271