Upgrade Tags component to include event handlers etc

In short, to get a component to do what I assumed the Tags component could do, I had to use the Link List component instead. The Tags component is essentially display-only, and such a tease!

As mentioned previously, when users see tags, they expect to be able to click on it and have something happen, depending on context.

Other goodies like prefix icons would be nice, too.

1 Like

Thanks @Schteevynn! I've shared your feedback internally as well :slightly_smiling_face:

1 Like

We have a new version of the tags component that has event handlers & prefix icons

@Tess Awesome, thank you!

When implementing an event handler script on a tag, how can I capture the value of the tag being clicked on, for use in the script?

My tag data is set up like this (shortened for clarity):

[
{"tagID": 1, "Label": "Alum: Berklee"},
{"tagID": 2, "Label": "Alum: Berkeley"},
{"tagID": 3, "Label": "Alum: Brown"}
]

if I use item.value I get NULL (values for the tags are set with item.tagID)
if I use item.tagID* (the attribute I'm trying to capture) I get NULL
if I use self.value I get an array of the values for all the tags in the list, not the specific tag being clicked on.

That last one would imply something like self.value[indexOfTheTagClicked] but that last bit is stumping me. How do I express/access "this tag"?

*this is what successfully captured a value when I was doing the same with a Link List component, however it seems the structure of a Tags component is different.

Haha,

Never mind (I think). I didn't realize that setting the tags' values with item.tagID means that when I invoke the bare item in the event handler, it returns that tagID value, no drill-down necessary.

The below works to return the tagID for the script:

Screenshot 2024-07-29 at 1.05.49 PM

and

Screenshot 2024-07-29 at 1.06.12 PM

1 Like