Tag options are disapprearing

[Nitesh_Jha]

We have a table and for each row, there are drop-down options.

We have javascript code that reads from mongo db and returns an array of the below object. On button click we load a table from this js file.

const result = {
firstName,
lastName,
linkedinId,
optionsList: {id: 1, linkedinId: "yourname"},
};

I am using tag to show drop-down to show all the linkeidn id in options list. But some times the options disappear and randomly works.

What wrong I am doing? Really appreciate your help! Thanks.

[WidleStudioLLP]

Hello @Nitesh_Jha ,
Welcome to the Retool Community!

The issue with disappearing drop-down options might arise from how the data is bound and managed in Retool. Ensure you correctly reference the optionsList. For example:

{{ currentSourceRow.optionsList.map(option => ({ label: option.linkedinId, value: option.id })) }}

• Label: The displayed text in the drop-down (e.g., linkedinId).
• Value: The underlying value (e.g., id).

This should help resolve the issue.

Thank You.

[Nitesh_Jha]

Thanks for taking the time to reply @WidleStudioLLP . Really appreciate!

I tried your suggestion still no luck. I have updated my data source to each item have unique id but still not working.

PS: Data

{{ 
  currentSourceRow.optionsList
    .filter((option, index, self) => 
      self.findIndex(o => o.linkedinId === option.linkedinId) === index
    )
    .map(option => ({ 
      id: `${option.id}`, 
      label: option.linkedinId, 
      value: option.id 
    }))
}}

[WidleStudioLLP]

Ensure currentSourceRow.optionsList is not undefined or null before mapping

{{ 
  currentSourceRow.optionsList 
    ? currentSourceRow.optionsList
        .filter((option, index, self) => 
          self.findIndex(o => o.linkedinId === option.linkedinId) === index
        )
        .map(option => ({ 
          id: `${option.id}`, 
          label: option.linkedinId, 
          value: option.id 
        }))
    : []
}}

This ensures that you handle undefined or null values gracefully while filtering out duplicates based on linkedinId and providing a clear structure for the id and label values.

[Nitesh_Jha]

Thanks for you code snippet but we already handle that in our js data source. I feel something is wrong with trigger, data state.
When I go to the option list and click on data source then it starts giving me options. After refresh it get backs to the original problem.

[Nitesh_Jha]

Could you please help me find a solution? We have been stuck since few days.

[WidleStudioLLP]

Hello @Nitesh_Jha,

Apologies for the delay in responding. This issue may be a bug, but I tested it in my app and encountered the same problem. However, I have a solution for you:

You can set your query to run on page load and configure the dropdown option list accordingly. Please refer to the screenshots for guidance.

Table column screenshot

Here is the option list screenshot.

Thank You.

[Nitesh_Jha]

Still not working, can we connect or look into logs to see what is the issue?

[WidleStudioLLP]

Hey @Nitesh_Jha ,

You can set your JavaScript query to run on page load, and this query will populate the options list dynamically.

Here’s an example:

• Demonstrates the mapped options being set.

• Shows how the dropdown options persist even after refreshing the Retool app.

The yellow warning line is nothing to worry about—it works as expected. Just ensure your query is configured to run on page load.

Confirm the correct query setup.

[Nitesh_Jha]

@WidleStudioLLP

load

Don't you think flatting out the array will show all the linkeidn id in option list? I want option according to each row.

Earch row has there own set of option list.

[MiguelOrtiz]

Hey @Nitesh_Jha,

Unfortunately this isn't currently supported by the Tags or Tag column type. The Tags and Tag column types only allows for a single selection of options that will be available for every row in the table. It's not possible to configure distinct options for each row.

Reference from this post

Another similar and more recent post here

The best workarounds are either an expandable row, where you can refer to your optionsList using currentRow/currentSourceRow, or a drawer with a form.

I understand your pain, in fact I submitted a feature request here, and this is well known to the Retool Support team

[Paulo]

Thank you, @MiguelOrtiz! This is exactly right.

@Nitesh_Jha, I added your +1 to the existing internal feature request, and we'll update you here with any news.

[Nitesh_Jha]

Thank you everyone for the help. I figured out the solution. Added on row click event, and triggered query to list options. It is working now.

[Paulo]

Are we using a separate Select/Multiselect component to list the options on row selection? Or did this approach work for the options to render independently on each row?

[Shawn_Optipath]

I have a table with a column service_completed. I want this to be a tag with an option list. The data for the option list is in the column services.
The value in services is different per row and is structured like this:

[
          {
            "id": "a",
            "name": "Service A"
          },
          {
            "id": "b",
            "name": "Service  B"
          },
          {
            "id": "c",
            "name": "Service C"
          }
        ]

Data source: {{ JSON.parse(currentRow.services || '[]') }}
Mapped options:
Value: {{ item.id }}
Label: {{ item.name }}

Tag mapped value: {{ item }}

When I first enter the data source, everything looks good and the dropdown populates correctly.

However when I refresh the page, the options disappear!

How can I fix this behavior?

[Paulo]

Hi @Shawn_Optipath, this is a current limitation of the table component. I merged your post here so we can update you when there's progress on the request.