Passing slimselect options

[dp6ai]

Hi @excid3

I'm struggling to pass slimselect options, could you give me an example of exactly how to do it?

I've tried many variations on the following but none of them seem to apply, although multiple: true does seem to effect the behaviour:

    <%= f.select :slot_ids,
                 Slot.all.by_date(f.object.event_date).collect { |x| [x.identifier, x.id] },
                 { prompt: true },
                 {
                   class: "form-select",
                   data: {
                     controller: "slimselect",
                     "slimselect-options-value": {
                       placeholder: 'data placeholder',
                     },
                    multiple: true
                   },
                 } %>

[dp6ai]

Just to be clear, its the placeholder option i'm trying to get working

[excid3]

It's a little strange at the moment. You have to write the JSON as a string in the attribute value:

<div data-slimselect-options-value="{placeholder: 'Please select an option'}">

At some point, we can just add support for Stimulus values to map directly to the options or something. Problem is that we can't easily add like an ajax option since that needs to be a JS function.

For some of that you might just have to inherit from this class if you need to customize formatting or whatever. I'm not entirely sure.

I'm also looking at using tom-select over SlimSelect going forward. It's got some functionality like being able to create entries that SlimSelect doesn't have iirc.

[dp6ai]

Thanks @excid3 i'll give that a go.

I think SlimSelect does allow you to add entries, see the addable option.

[excid3]

Oh yeah, it does! I definitely missed that.

[phylor]

Is it correct that addable cannot be used at the moment? The value needs to be a function. It seems that functions cannot be passed in the JSON string.

You can still extend the controller of course:

import SlimSelect from 'slim-select'
import StimulusSlimSelect from "stimulus-slimselect"

export default class extends StimulusSlimSelect {
  connect() {
    this.slimselect = new SlimSelect({
      select: this.element,
      addable: (value) => value,
      ...this.optionsValue
    });
  }
}