Feature Request: selectedLabels Key for MultiSelect Component

Feature Requests
,
1

Hello Retool Team,

I hope this message finds you well. I'm writing to request a new feature for the MultiSelect component that could significantly enhance its functionality and user experience.

Feature Description: For the SingleSelect component, we currently have the selectedLabel key, which provides a straightforward way to access the selected option's label. This is incredibly useful for various applications, especially when dealing with human-readable values.

However, when it comes to the MultiSelect component, there is no direct equivalent. While we can work around this by accessing the selected values' labels through more complex queries or transformations, it would be immensely beneficial to have a selectedLabels key. This key would ideally return an array of strings representing the labels of the currently selected options in the MultiSelect component.

Use Case: This feature would be particularly useful in scenarios where the labels of selected options need to be displayed to the user in another place (i.e. in a tooltip or empty state)
e.g. "No employee have been assigned to 'Site 1, Site 2, Site 3'." Where I could get the Site names by referencing siteMultiselect.selectedLabels.join(', '):wink:

Suggested Implementation: A possible implementation would include adding a selectedLabels key to the MultiSelect component's properties, which dynamically updates to reflect the labels of the options currently selected by the user. This should be an array of strings, making it easy to display or process the selected labels further.

Impact: Implementing this feature would greatly simplify the development process for applications requiring user-friendly display of selected options and reduce the need for workarounds. It aligns with Retool's goal of making internal tools as efficient and user-friendly as possible.

Thank you for considering this feature request. The addition of a selectedLabels key to the MultiSelect component would undoubtedly be a valuable enhancement for many Retool users. I look forward to your feedback and hope to see this feature in a future update.

Best regards,
Trist

2

This is an example of the current workaround for sites

Here is my transformer named selectedSiteLabels

const sites = {{ selSites.data }} // the actual backend query (array of objects)
const selectedSites = {{siteFilterMultiselect.value}} // the multiselect component

// filter for the selected items on id, map to only show the name (label), join into a single string
const selectedLabels = sites.filter(site => selectedSites.includes(site.id)).map(site => site.name).join(', ');

return selectedLabels
3

Hi @tristdrum, thank you for your feedback! This is a great idea. We just created the FR and we'll update you with any news on the development of this feature. :slightly_smiling_face:

1 Like
4

It looks like we do have the ".selectedLabels" property:

Screenshot 2024-04-17 at 5.27.19 PM
Screenshot 2024-04-17 at 5.27.19 PM795×234 24.3 KB


Let us know if this is not showing up for you. :face_with_monocle:

5

Hey @Paulo!

I've figured it out. Copy & paste that multi-select and the pasted version won't have a number of options... (including selected Indexes, Items, Labels)

6

Aha! We are currently tracking this issue internally, a similar issue happens with the Form component. We attached your feedback to the report and we'll update you here when we it's fixed. :slightly_smiling_face:

7

The latest cloud release (v3.47.0) included a fix for this issue! :tada:

8

Hey @Paulo, thanks to the team for fixing & to you updating me!

I see it works if you create a new multi-select component and then duplicate it.

But what about all the components I already copied and pasted?

Do I have to recreate a multi-select and then go and copy & paste it across all my apps to fix? :slight_smile:

9

Unfortunately, there is no way to add those properties manually to the duplicates. However, you should not need to recreate the multi-select. You can copy the existing one (the original, with all properties) and replace the duplicates on the other Apps.

1 Like