Tag table component dropdown not rendering as expected

I have a table of which one of the columns is a “tags” component…when a row is selected and the tag is clicked a dropdown appears with a search bar / the ability for the user to select a new tag. When the selected row is at the bottom of the page the dropdown doesnt fully render or doesn’t render at all/ glitches… There is no on click event handlers or anything that I can find to fix this issue… I want it to render above when it cannot fit below. Does anyone know how I might fix this?

1 Like

Summary

In a Table component, a 'tags' column's edit dropdown doesn't fully render, glitches, or fails to appear when the selected row is near the bottom of the page/container, and the goal is to have the dropdown open upward when there isn't room below it.

AI Response

This is a known limitation with the Table tag column dropdown in fit-to-page/expanded containers, and it has an open feature request to have the menu open upward when there's no room below. The most reliable workaround is to reserve extra space beneath the last rows: enable the container's footer and add a divider inside it (or add bottom margin/a divider below the table) so the dropdown has room to render. As a quick temporary fix, forcing a re-render also works—type a search term with no matches to trigger the 'no results' state, then clear the search so the full option list re-renders.

Sources

:bookmark: Issue with Tag Dropdown on Expanded to Fit Table
Solved topic covering the same fit-to-page table where the bottom-row tag dropdown is inaccessible; documents the accepted workaround, a force re-render trick, and links to the open feature request to have the dropdown open upward.
:bookmark: Tag column not showing info when it's the last row in the table
Solved topic confirming this is a known bug when editing tag columns in the last rows, with a concrete workaround: enable the container footer and add a divider there to give the dropdown extra space.

The Community Team is testing out a new automation. Let us know if it's helpful (or not) by leaving a :heart:, :+1:, or :-1:. Or by marking this post as the "Solution"! Let us know if you have any feedback here. :rocket:

1 Like

Hi @Delaney_Harwell, Welcome to the Retool Community!

I understand the issue you were facing previously. At that time, it was a feature request, as mentioned by @Resource_Bot in the links they shared. However, this functionality is now working as expected.

I tested it on my end with a Table configured to Auto Height and Full Width. I also created a Transformer with some test data and used its output as the tag options for an Editable Table column.

Here is the test Transformer code:

return [
  {
    label: "Add (inc VAT)",
    value: "add_inc_vat",
  },
  {
    label: "Add (Ex VAT)",
    value: "add_ex_vat",
  },
  {
    label: "New (inc VAT)",
    value: "new_inc_vat",
  },
  {
    label: "New (Ex VAT)",
    value: "new_ex_vat",
  },
  {
    label: "Edit (inc VAT)",
    value: "edit_inc_vat",
  },
  {
    label: "Edit (Ex VAT)",
    value: "edit_ex_vat",
  },
  {
    label: "Update (inc VAT)",
    value: "update_inc_vat",
  },
  {
    label: "Update (Ex VAT)",
    value: "update_ex_vat",
  },
  {
    label: "Remove (inc VAT)",
    value: "remove_inc_vat",
  },
  {
    label: "Remove (Ex VAT)",
    value: "remove_ex_vat",
  },
  {
    label: "Refund (inc VAT)",
    value: "refund_inc_vat",
  },
  {
    label: "Refund (Ex VAT)",
    value: "refund_ex_vat",
  },
  {
    label: "Discount (inc VAT)",
    value: "discount_inc_vat",
  },
  {
    label: "Discount (Ex VAT)",
    value: "discount_ex_vat",
  },
  {
    label: "Credit (inc VAT)",
    value: "credit_inc_vat",
  },
  {
    label: "Credit (Ex VAT)",
    value: "credit_ex_vat",
  },
  {
    label: "Adjustment (inc VAT)",
    value: "adjustment_inc_vat",
  },
  {
    label: "Adjustment (Ex VAT)",
    value: "adjustment_ex_vat",
  },
  {
    label: "Replacement (inc VAT)",
    value: "replacement_inc_vat",
  },
  {
    label: "Replacement (Ex VAT)",
    value: "replacement_ex_vat",
  },
];

After binding the Transformer output to the tag options, I tested it in Preview mode, and the tags are working correctly as expected.

You can also refer to the screen recording here:

Screen recording

One suggestion: Add a 2–4 px spacer below the Table component so that the last tag options are displayed properly without being cut off.

If you're still seeing the issue on your end, please share your current configuration or a screen recording, and I can take a closer look.

1 Like

Hi @Delaney_Harwell! Welcome to the Community forum :partying_face:

It looks like @WidleStudioLLP was able to provide test code and a spacing recommendation, and @Resource_Bot was able to surface a couple of related threads - were you able to give these suggestions a try?

I have also replicated the table with tags and enabled the Editable option. I can see the dropdown menu for the last row being cut off to not display all of the options, but you should be able to scroll through the options as seen in @WidleStudioLLP's video recording.

That being said, there is an internal feature request to also display the dropdown menu upwards when reaching the bottom boundaries of the table. Ideally, the dropdown should render the appropriate orientation by default so you can see all of the options at a glance.

There's no timeline on a fix for this yet, but hopefully the suggestions provided will help in the meantime. Let me know if you have any other questions!

-Jen

1 Like