JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<script src="https://rawgit.com/wenzhixin/multiple-select/master/dist/multiple-select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/dist/multiple-select.css">
<select class="w300" multiple="multiple">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

CSS

.w300 {
    width: 300px;
}

JavaScript

$(function () {
	$('select').multipleSelect({
        placeholder: "View As",
        filter: true,

        selectAll: true, // if I set this to false, the issue doesn't happen (but unfortunately I lose "Select All" functionality too)
        allSelected: "All Users",
        width: 400,
        multiple: true,
        multipleWidth: 180,
        minimumCountSelected: 4,

        onClick: function(view) {
            updateViewers(view);
            refreshAllReports();
        },
        onOptgroupClick: function(view) {
            updateViewers(view);
            refreshAllReports();
        },
        onCheckAll: function() {
           console.trace(); // line 1924
           updateViewers(view);
            refreshAllReports();
        },
        onUncheckAll: function() {
            updateViewers(view);
            refreshAllReports();
        }
    });
});