Multiple selects not rendering properly

[tomhalley]

Here is my Schema:

  categories: {
    type: [String],
    label: "Tags",
    autoform: {
      type: "select-multiple",
      options: function() {
        return Categories.find().map(function(a) {
          return {label: a.title, value: a.title}
        })
      }
    },
  },

I do not get the multiple select that appears on the materialize documentation (http://materializecss.com/forms.html#select). Instead, I get an almost completely default HTTML select with the multiple attribute.

Please, somebody help I've been wrestling with this all day

Thanks

[tomhalley]

Here is the HTML it renders from chrome devtools:

<div class="row">
  <div class="input-field col s12">
    <select multiple="" name="categories" id="9vT38QXCTtCirrLGr" data-schema-key="categories" class="browser-default">
        <option value="Birds">Birds</option>
        <option value="Mammals">Mammals</option>     
    </select>
    <label for="9vT38QXCTtCirrLGr" class="active">Tags</label>     
  </div>
</div>

[tomhalley]

I figured it out.

Why does this file: meteor-autoform-materialize/inputTypes/select-multiple/select-multiple.js basically make the select-multiple not work with materialize?

[Chey47]

so what did you do my friend ??? :(

[tomhalley]

Ah sorry, I'll just go back over the code and update here

[tomhalley]

I'll get back with an answer for you tomorrow, don't have access to a working copy ATM. Sorry!

[Chey47]

take all your time my friend :) thank you in advance

[tomhalley]

In my subscriptions for the category object, I added in some jquery bits to sort the rendering out.

self.subscribe('categories', function() {
    setTimeout(function()` {
        $("select.browser-default").removeClass('browser-default');
        $("select").material_select();
    }, 100);
});

I also took the multiple-select out of the schema, but i don't think it made a lot of difference.

categories: {
    type: [String],
    label: "Tags",
    autoform: {
        options: function() {
            return Categories.find().map(function(a) {
            return {label: a.title, value: a.title}
        })
    }
},

[Chey47]

thank you for your answer it does work fine, but i kinda found a better solution if it would interest anyone :

categories: {
        type: [String],
        optional: false,
        label: "Categories",
        autoform: {
            type: "select",
                afFieldInput: {
                  multiple: true
              }
        }
    },

[tomhalley]

Just tried your solution, unfortunately, it did nothing except give me a multiple select in the traditional sense, not a dropdown with multiple selector