Implementing a custom field using Tags instead of Select

[Sandilly]

Hello,

Thank you for all your time addressing my questions! Still learning how to use all of what Avo has to offer and really appreciate all your guidance.

Using the example from the docs here, avo docs - custom stimulus controllers, is there a way to copy this behavior but instead of Cities being a select field, to use a tags field?

I want the behavior of the tags field but the suggestions to be populated by a query based off another select box. I was able to recreate this as shown in example, but once I changed the Cities to use a tags field, and updated all the target names, it just broke.

[Paul-Bob]

Hi @Sandilly,

After integrating Stimulus JS into your application, you should be able to take control of all the fields. Some, like text and select fields, are relatively simple, but others can be more complex, such as the tags field.

There isn't any official guide available. It uses Tagify behind the scenes, and here is the Stimulus controller that we use to manipulate the tags field.

We don't have an example, but by referring to the Tagify documentation along with our Stimulus controller, you should be able to manipulate it as needed with a custom Stimulus controller. Let me know how it goes. If you achieve the desired result and are willing to share your steps and code, we might even create a guide from it.

Thank you!

PS: Could you explain the use case and what behavior are you trying to achieve? There might be an easier alternative to achieve it

[Sandilly]

Hi @Paul-Bob,

Yeah, I am still playing around with this. So no solution yet, but the use case is (using the demo example of country and cities)

• The cities field options are populated based on the country that is selected.
• A user can select multiple cities from the options (cannot add custom cities or edit existing cities) and for it to display like the tags input where a use can remove it from the selected list and able to select it from a list of options.

I followed the docs https://docs.avohq.io/3.0/stimulus-integration.html#custom-stimulus-controllers, but haven't figured out how to pass the options to the tags field.

[Paul-Bob]

I think using the select as multiple would be much less complex that manipulating the tags field with JS.