I'm wondering if it's possible to disable the Option dropdown in the multiselect component. Retool provides a standalone list component, which I find useful because my list requires complex logic to determine its content. Using a separate list component works well for my needs.
However, I also want an input field that displays selected items as tags, similar to the multiselect component. When I combine these two components, the built-in Option dropdown of the multiselect component becomes an issue. Every time I click on the multiselect component, the dropdown appears automatically, and I can't overlay it with other components.
Would it be possible to add an option to disable the Option dropdown in the select component?
Interesting use case. I can definitely make a feature request to have a toggle to turn off the dropdown of a multiselect component.
May I ask why in your use case are you clicking on the multiselect field if you are using the separate standalone list component for the click interactions to chose an option from the list?
If you want top use a multiselect for the display purpose of showing a value as a tag, with the list component being the tool for user interaction to select-via-click, there are some other options to the multiselect that you could use instead
In this example, I am using a text component and using markdown to style it. Using triple back tics ` before and after the value to give it some style. Which the value changing dynamically based on which option from listbox2 is clicked.
We also have a tags component which could work even better if you can't find the right markdown styling to meet your needs!
If you chose the 'mapped' option and then wrap the interpolated value in [ ] it will display a single tag of the value selected from the list as a tag pill which can be further styled to be other colors.
Let me know if either of those work arounds would fit your use case!
I want to create a search box where each user input is converted into a key:value format Tag, and this Tag serves as a search condition. The effect I want to achieve is that whenever the user enters different conditions, the dropdown list below provides different suggestions. For example, when I type "10.0.0.1," it suggests "IP: 10.0.0.1." When I type "10.0.0.1 10.0.0.2," it suggests "IPA:10.0.0.1 AND IPB:10.0.0.2." So, what I’ve done is create multiple independent lists, each validated by a different JS query against the multiselect input value. If a certain condition is met, the corresponding list is displayed. Essentially, I’ve just used the multiselect styling and rewritten the dropdown list logic myself. That’s why I’d like to disable the default dropdown list that comes with multiselect. I hope I’ve clearly expressed what I mean.
A temporary work around would be to have the list you are filtering be above the input field or offset to the side so that the multiselect dropdown doesn't block it.
But I understand that is not the best stylistically, I will mark this work around as the solution for now while we wait on the feature request.
Maybe another user had built a similar component combo and can chime in on their work arounds
