Multiselect Custom Value Option Color

[benbarry]

I have a multiselect component that populates its options from a query, and it also allows custom values to be input.

What I'd like to do is color all the options that are already in the database the same default color (in this example green), and then I'd like to color custom value options that have added a different color (in this example red). I'd like to do this so that the end user has an indication that they're about to add something new to the database.

Something like this:

The only way I've kinda figured out how to do this is:

1. Set the same default color for every mapped option:
   

   

2. Set the style for the default color of Tags to the color I want shown for new custom value options:
   

   

This is annoying, because then I have unnecessary color dots on every menu item in the list:

I thought maybe I could get rid of those with some CSS, but doesn't seem possible.

I also through maybe I could programmatically set the color in the Styles section based on some condition, but it doesn't seem to work that way.

Anyone got ideas for a better solution?

[ScottR]

Check out this post:
There are some ways you can implement what you want to do

Tag Color Not working issue

@andrea_bluelabs For the currentRow.core, is there a value you want to check to see if core == 'something' then make the color of the tag #000000 ? In the JS section... {{currentRow.core == 'something'?'#000000':'anotherhexvaluehere'}} OR if it is a value to check within the tags column itself, then {{item == 'somevaluehere'?'#000000':'anotherhexvaluehere' }}

[benbarry]

@ScottR, hmm, everything in that post seems to deal with the Tag Dropdown column type in a table. However, I'm dealing with a multiselect component, so I don't understand how anything in that post is relevant to the issue I have.

[ScottR]

@benbarry I assumed you would have understood that a ternary operator could be used. I assumed incorrectly, so my apologies.

@benbarry

is color all the options that are already in the database the same default color (in this example green), and then I'd like to color custom value options that have added a different color (in this example red

The logic still applies though, does it not? - Why can't you use a ternary operator to determine what already exists and set that to green and if it is new then set the color to red?

[benbarry]

@ScottR I'm just not sure where you're proposing that I use a ternary operator.

Using it in the mapped options would be pointless, since every option there is already in the database.

And, it doesn't seem that I can use a ternary in the Styles section to set the tag color for each item. It seems like the Style just sets a default globally for that component, and something like item or i is not available to be used.

[benbarry]

Like, I totally understand that I could use a ternary in a situation like this. In this particular database there is a type field, and I could color each tag based on that type in the mapped options.

However, that's not the issue I'm having.

I just want to color new custom values a unique color without adding the color dots to the menu for items that already exist.

[benbarry]

What I want (I think) is essentially something like this:

[ScottR]

Actually based on what you added above the solution is

{{!YourMappedResourceName.value.includes(self.value[i])?'red':'green'}}

In the Tags Styles field

[benbarry]

@ScottR I had tried something similar to this yesterday. It seems like maybe you're getting a different behavior than I am though, and I don't understand why (feel like maybe I'm missing something obvious).

I recorded a quick screencast of the behavior I'm getting:

[ScottR]

Hmmm you know what even if I remove the ! in it and say if true then green if not red I am now running into the same issue as you... Could be a bug I just find it odd that it worked a few minutes ago and now it isn't.... I'll keep pecking away and see where I get...

[benbarry]

Thanks for trying to help figure this out. This definitely feels like this should be the solution I'm after, and seems like a bug.

[ScottR]

@benbarry
Got it

So it was a combo of my original but deleted solution and the one we both tried

In Color put in the logic to test if false using ! and in the Tags field add the same logic but checking if true

[benbarry]

@ScottR, so this is functionally the same as the "solution" I had in my original post, and still not quite the behavior I desire. That original "solution" achieved this same result in a simpler way.

The issue here is that by adding color in the mapped options, it applies the little color dots in the dropdown list. Since they're all the same in this case, they don't provide any real utility and are just a visual distraction.

There seems to be no way to turn those dots off (either through the component inspector, or via overriding CSS).

Maybe I'm just being too OCD, but it bugs me.

[ScottR]

hahahah nope all good man....
Well I guess we're back to square 1!
@victoria S.O.S.

[Kabirdas]

Hey folks!

This is tricky also very interesting to see the steps yall have taken so far.

The following custom css seems to be working for me to hide the circles, can you let me know if it does for you as well?

._3U1Pa._CpRU0._2ftt9 {
    display: none;
}

[benbarry]

Yes, that CSS does hide the circles! I have always avoided styling things based on those kinds of classes, since I assumed they were auto-generated and might not be stable. I think this will be sufficient for my use case.

I thought you might run in to issues if you had a multiselect where they did want the circles and another one where you didn't on the same page, but it looks like specifying the multiselect ID works for that case.

Something like:

#multiselect1--0 ._3U1Pa._CpRU0._2ftt9 {
    display: none;
}

[Kabirdas]

You're right there @benbarry, those classes aren't guaranteed between versions, they should just be stable enough to use as a temporary workaround. I think the longer-term solution here is for you to have the option to hide the color circles which I'll bring up with the dev team.

[benbarry]

Yes, it would be great to have that option.

It would also be really nice to have an array of just the new custom values in the state for the multiselect component.

[benbarry]

For anyone finding this. These classes changed.

Instead of ._3U1Pa._CpRU0._2ftt9, it's now:

._JuocV._PX0lH._iAibW {
    display: none;
}