Stimulus JS help 🙌

[vianeyHA]

For now, I'm using stimulus JS.

However, I would like to use a multi-select field, to which I found an alternative to using tags. Is there a way to add data-target? or Does Avo have a multi-select field?

field :user, as: :tags, enforce_suggestions: true, options: [], html: {
    edit: {
      input: {
        data: {
          user_resource_target: 'userFieldInput'
        }
      }
    }
  }

[Paul-Bob]

Hello @vianeyHA

For now, I'm using stimulus JS. However, I would like to use a multi-select field, to which I found an alternative to using tags.

Tags can indeed be an alternative to the multi-select field. Do you feel that tags cover all your use cases, or would a classic multi-select field fit better?

Is there a way to add data-target?

Avo by default already adds this kind of targets (documented here)

In this case, you should be able to access the target on your stimulus controller with this.userTagsInputTarget. Don't forget to add it to the targets array: static targets = ['userTagsInput']

Does Avo have a multi-select field?

No, there isn't a multi-select field for the moment. I'm just wondering if the way you use tags covers what you need for a multi-select field or if the workaround will not do the trick.

[vianeyHA]

Yes, Tags are a good option! Thank you!

Is it possible to know the value of the tags or change the options they are showing?

I am having some problems with this. Since according to a select value I would like to filter the data of a query according to that value.

field :users, as: :belongs_to, hide_on: [:index], html: {
    edit: {
      input: {
        data: {
          user_resource_target: 'userFieldInput',
          action: 'input-> user-resource#onUserChange'
        }
      }
    }
  }

  field :pets, as: :tags, enforce_suggestions: true, options: [], html: {
    edit: {
      input: {
        data: {
          user_resource_target: 'petsTagsInput'
        }
      }
    }
  }

Currently I already get the value of the User Field, just having issues with the pets field

So my targets will be:
static targets = ["petsTagsInput", "petsTagsWrapper"];

And with these targets could I change the values ​​and access the value, right?

[vianeyHA]

Or would there be a way to send this result to the fetch_values_from method?

field :pets, as: :tags, fetch_values_from: '/console/pets/fetch_pets', enforce_suggestions: true

[vianeyHA]

hi @adrianthedev @Paul-Bob Would you have any other recommendations to me?😅

[Paul-Bob]

Or would there be a way to send this result to the fetch_values_from method?

Yes @vianeyHA the input value is sent as a q param to fetch_values_from endpoint and can be accessed as params[:q]

By the way, there is no need for you to define user_resource_target: 'petsTagsInput' since Avo is already generating targets behind the scenes, and they are available on all resources' stimulus controllers.

For more details check this documentation https://docs.avohq.io/3.0/stimulus-integration.html#field-inputs-as-targets

Let me know how it goes.