[SOLVED] Multiselect Duplicates: onRendered NPM mistake?

help
1

Hello there!

Using both bootstrap-multiselect and bootstrap-select installed via NPM, and I cant figure why the components are duplicate. Maybe I am making some mistake on the order html and JS are being loaded, or loading the npm scripts on the wrong place.

Template name=profile

          <select id="sites" name="sites" class="form-control" multiple="multiple">
                {{#each state in states}}
                {{#if userHasStateSelected state }}
                <option selected="selected" value="{{state}}">{{state}}</option>
                {{else}}
                <option value="{{state}}">{{state}}</option>
                {{/if}}
                {{/each}}
            </select>
        </div>

        <select id="test" class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Barbecue</option>
        </select>

profile.js

import { states } from "../../../api/consults/formData";
import "bootstrap-multiselect";
import { selectpicker } from "bootstrap-select";
import "./profile.html";

Template.profile.onRendered(function () {
  $("#sites").multiselect({
    enableFiltering: true,
    templates: {
      filter:
        '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /><div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div></div></div>',
    },
  });
  $(function () {
    $("#test").selectpicker();
  });
});

This is the result

2022-03-15_16-57
2022-03-15_16-57872×397 36.2 KB

2

It looks like you missed some css importing. I believe they use css to hide the orginal (browser built-in) select box.

1 Like
3

Hello friend,

Thanks for the response. I thought the importing the node_module would bring also the css.

For future reference, I added the proper import in the template JS and worked like a charm.

# profile.js
import "bootstrap-multiselect/dist/css/bootstrap-multiselect.min.css";

The docs also comment about this

3 Likes