'templates' option not working

[rammoozz]

Hello,

Adding the templates option seems to cause the multiselect not to render, is there something with my code or is the feature not included in the wrap?

templates= {function(){
    return({
           templates: {
                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',
                filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
                li: '<li><a href="javascript:void(0);"><label></label></a></li>',
                divider: '<li class="multiselect-item divider"></li>',
                liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
            }
        });
    }}

[skratchdot]

Have you tried it without the nested 'templates' key? I also think you just need to pass an object, but I haven't tested this. Something like:

templates= {{
                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',
                filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
                li: '<li><a href="javascript:void(0);"><label></label></a></li>',
                divider: '<li class="multiselect-item divider"></li>',
                liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
    }}

So a simplified version might be:

<MultiSelect templates={{li:'<li>neat<li>'}} />

Can you test this and let me know if it works? I might be able to look into it a bit later...

[skratchdot]

Forgot to mention that the templates option was supposed to be fixed in this commit: https://github.com/skratchdot/react-bootstrap-multiselect/commit/d49f078b989b9b6af7dca76da04b8c71fdaf529c related to #12

[rammoozz]

:+1: Thank you! Life Saver!