#368, #393, tests and documentation.

dist/js/bootstrap-multiselect.js

@@ -657,6 +657,10 @@
          * Checks if a select all has already been created.
          */
         buildSelectAll: function() {
+            if (typeof this.options.selectAllValue === 'number') {
+                this.options.selectAllValue = this.options.selectAllValue.toString();
+            }
+            
             var alreadyHasSelectAll = this.hasSelectAll();
             
             if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple

index.html

@@ -37,6 +37,8 @@
                         <li><a href="#post">Server-Side Processing</a></li>
                         <li><a href="#keyboard-support">Keyboard Support</a>
                         <li><a href="#faq">Frequently Asked Questions</a></li>
+                        <li><a href="#known-issues">Known Issues</a></li>
+                        <li><a href="tests/SpecRunner.html">Tests</a></li>
                         <li><a href="#license">License</a></li>
                     </ul>
                 </div>
@@ -46,7 +48,7 @@
                     </div>
                     
                     <p class="alert alert-info">
-                        Tests are available <a href="http://davidstutz.github.io/bootstrap-multiselect/tests/SpecRunner.html">here</a> using the <a href="http://jasmine.github.io/" target="_blank">Jasmine Testing Framework</a>.
+                        <b>Please see <a href="#known-issues">Known Issues</a>.</b>
                     </p>
                     
                     <p class="alert alert-info">
@@ -54,10 +56,6 @@
                     </p>
                     
                     <p class="alert alert-info">
-                        <b>The demonstration page for Twitter Bootstrap 2.3 was removed. Nevertheless, this page should work using Twitter Bootstrap 2.3 except for some methods which are marked accordingly.</b>
-                    </p>
-                    
-                    <p class="alert alert-warning">
                         <b>Please have a look on <a href="#how-to-contribute">How to contribute?</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.</b>
                     </p>
                     
@@ -1421,6 +1419,39 @@
         });
     });
 &lt;/script&gt;
+</pre>
+                                    </div>
+                                    
+                                    <p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
+                                    
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-selectAllValue-numeric').multiselect({
+                                                    includeSelectAllOption: true,
+                                                    selectAllValue: 0
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-selectAllValue-numeric" multiple="multiple">
+                                            <option value="1">Option 1</option>
+                                            <option value="2">Option 2</option>
+                                            <option value="3">Option 3</option>
+                                            <option value="4">Option 4</option>
+                                            <option value="5">Option 5</option>
+                                            <option value="6">Option 6</option>
+                                        </select>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-selectAllValue-numeric').multiselect({
+            includeSelectAllOption: true,
+            selectAllValue: 0
+        });
+    });
+&lt;/script&gt;
 </pre>
                                     </div>
                                 </td>
@@ -2491,20 +2522,12 @@
                                             $(document).ready(function() {
 
                                                 var firstConfigurationSet = {
-                                                    selectAll: {
-                                                        enabled: false
-                                                    },
-                                                    filter: {
-                                                        enabled: false
-                                                    }
+                                                    includeSelectAllOption: false,
+                                                    enableFiltering: false
                                                 };
                                                 var secondConfigurationSet = {
-                                                    selectAll: {
-                                                        enabled: true
-                                                    },
-                                                    filter: {
-                                                        enabled: true
-                                                    }
+                                                    includeSelectAllOption: false,
+                                                    enableFiltering: true
                                                 };
 
                                                 var set = 1;
@@ -2553,20 +2576,12 @@
     $(document).ready(function() {
 
         var firstConfigurationSet = {
-            selectAll: {
-                enabled: false
-            },
-            filter: {
-                enabled: false
-            }
+            includeSelectAllOption: false,
+            enableFiltering: false
         };
         var secondConfigurationSet = {
-            selectAll: {
-                enabled: true
-            },
-            filter: {
-                enabled: true
-            }
+            includeSelectAllOption: false,
+            enableFiltering: true
         };
 
         var set = 1;
@@ -3844,6 +3859,27 @@ $('.multiselect').multiselect({
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
                         </dd>
+                        
+                        <dt>Esc does not close the dropdown?!</dt>
+                        <dd>
+                            This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this.
+                        </dd>
+                    </dl>
+                    
+                    <div class="page-header">
+                        <h2 id="known-issues">Known Issues</h2>
+                    </div>
+                    
+                    <dl>
+                        <dt>Slow dropdown on Chrome 35.</dt>
+                        <dd>
+                            As discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/268">#268</a>, certain versions seem to have some performance problems, especially Chrome 35.0.1916.114m.
+                        </dd>
+                        
+                        <dt>Using <code>maxHeight</code> results in the filter being not fixed at the top.</dt>
+                        <dd>
+                            See issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/396"></a>. Pull requests are welcome.
+                        </dd>
                     </dl>
                     
                     <div class="page-header">

tests/spec/bootstrap-multiselect.js

@@ -49,6 +49,16 @@ describe('Bootstrap Multiselect "Core".', function() {
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
     });
     
+    it('Select method should handle "null" and "undefined" correctly.', function() {
+        expect($('#multiselect option:selected').length).toBe(9);
+        
+        $('#multiselect').multiselect('select', null);
+        expect($('#multiselect option:selected').length).toBe(9);
+        
+        $('#multiselect').multiselect('select', undefined);
+        expect($('#multiselect option:selected').length).toBe(9);
+    });
+    
     it('Should be able to deselect options by value.', function() {
         $('#multiselect').multiselect('select', '10');
         $('#multiselect').multiselect('deselect', '10');
@@ -57,6 +67,16 @@ describe('Bootstrap Multiselect "Core".', function() {
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
     });
     
+    it('Deselect method should handle "null" and "undefined" correctly.', function() {
+        expect($('#multiselect option:selected').length).toBe(9);
+        
+        $('#multiselect').multiselect('deselect', null);
+        expect($('#multiselect option:selected').length).toBe(9);
+        
+        $('#multiselect').multiselect('deselect', undefined);
+        expect($('#multiselect option:selected').length).toBe(9);
+    });
+    
     it('Should be able to select options using an array of values.', function() {
         $('#multiselect').multiselect('select', ['10', '11']);
         
@@ -91,7 +111,7 @@ describe('Bootstrap Multiselect "Core".', function() {
         expect($('#multiselect').prop('disabled')).toBe(false);
     });
     
-    it('Should be able to selec all options.', function() {
+    it('Should be able to select all options.', function() {
         $('#multiselect').multiselect('selectAll');
         
         for (var i = 1; i < 100; i++) {
@@ -100,7 +120,7 @@ describe('Bootstrap Multiselect "Core".', function() {
         }
     });
     
-    it('Should be able to deselec all options.', function() {
+    it('Should be able to deselect all options.', function() {
         $('#multiselect').multiselect('selectAll');
         
         for (var i = 1; i < 100; i++) {
@@ -150,9 +170,136 @@ describe('Bootstrap Multiselect "Core".', function() {
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
     });
     
+    it('Should deselect an option when checkbox is changed (change event).', function() {
+        $('#multiselect-container li input[value="10"]').prop('checked', true);
+        $('#multiselect-container li input[value="10"]').trigger('change');
+        
+        // Already checked above.
+        
+        $('#multiselect-container li input[value="10"]').prop('checked', false);
+        $('#multiselect-container li input[value="10"]').trigger('change');
+        
+        expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
+        expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
+    });
+    
+    it('Should select an option when checkbox is clicked.', function() {
+        $('#multiselect-container li input[value="10"]').click();
+        
+        expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
+        expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
+    });
+    
+    it('Should deselect an option when checkbox is clicked.', function() {
+        $('#multiselect-container li input[value="10"]').click();
+        $('#multiselect-container li input[value="10"]').click();
+        
+        expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
+        expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
+    });
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+    });
+});
+
+describe('Bootstrap Multiselect "Single Selection"', function() {
+    beforeEach(function() {
+        var $select = $('<select id="multiselect"></select>');
+        
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">Option ' + i + '</option>');
+        }
+        
+        $('body').append($select);
+        
+        $select.multiselect({
+            buttonContainer: '<div id="multiselect-container"></div>'
+        });
+    });
+    
+    it('Should create radio buttons instead of checkboxes.', function() {
+        expect($('#multiselect-container input[type="radio"]').length).toBe(99);
+        expect($('#multiselect-container input[type="checkbox"]').length).toBe(0);
+        
+        // Browser selects one option per default.
+        expect($('#multiselect option:selected').length).toBe(1);
+    });
+    
+    it('Only one option at a time can be selected.', function() {
+        expect($('#multiselect option:selected').length).toBe(1);
+        
+        var i = 0;
+        $('#multiselect-container input').each(function() {
+            if (i === 0) {
+                expect($(this).prop('checked')).toBe(true);
+                i++;
+            }
+            else {
+                expect($(this).prop('checked')).toBe(false);
+                $(this).click();
+                
+                expect($('#multiselect option:selected').length).toBe(1);
+                expect($(this).prop('checked')).toBe(true);
+                i++;
+            }
+        });
+    });
+    
+    afterEach(function() {
+        $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+    });
+});
+
+describe('Bootstrap Multiselect "Optgroups"', function() {
+    beforeEach(function() {
+        var $select = $('<select id="multiselect" multiple="multiple"></select>');
+        
+        for (var i = 1; i < 11; i++) {
+            var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>');
+            
+            for (var j = 1; j < 11; j++) {
+                $optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>');
+            }
+            
+            $select.append($optgroup);
+        }
         
+        $('body').append($select);
+        
+        $select.multiselect({
+            buttonContainer: '<div id="multiselect-container"></div>',
+            enableClickableOptGroups: true
+        });
+    });
+    
+    it('Should correctly create labels for optgroups.', function() {
+        expect($('#multiselect-container li.multiselect-group').length).toBe(10);
+        expect($('#multiselect-container li.multiselect-group-clickable').length).toBe(10);
+        
+        $('#multiselect-container label.multiselect-group').each(function() {
+            expect($('input', $(this)).length).toBe(10);
+        });
+    });
+    
+    it('Groups should be clickable.', function() {
+        expect($('#multiselect option:selected').length).toBe(0);
+        
+        var i = 0;
+        $('#multiselect-container li.multiselect-group').each(function() {
+            $('label', $(this)).click();
+            expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
+            expect($('#multiselect option:selected').length).toBe(10);
+            
+            $('label', $(this)).click();
+            i++;
+        });
+    });
+    
+    afterEach(function() {
+        $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });
 });
@@ -352,8 +499,78 @@ describe('Bootstrap Multiselect "Select All".', function() {
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
     
+    it('Should update the select all option when all options are selected by the click event.', function() {
+        expect($('#multiselect option:selected').length).toBe(0);
+        expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
+        
+        $('#multiselect-container input[value!="multiselect-all"]').click();
+        
+        expect($('#multiselect option:selected').length).toBe(99);
+        expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
+    });
+    
+    it('Should update the select all option when all options are deselected by the click event.', function() {
+        expect($('#multiselect option:selected').length).toBe(0);
+        expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
+        
+        $('#multiselect-container input[value!="multiselect-all"]').click();
+        
+        expect($('#multiselect option:selected').length).toBe(99);
+        expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
+        
+        $('#multiselect-container input[value!="multiselect-all"]').click();
+        
+        expect($('#multiselect option:selected').length).toBe(0);
+        expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
+    });
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });
 });
+
+describe('Bootstrap Multiselect Specific Issues', function() {
+    
+    it('#393', function() {
+        var $select = $('<select id="multiselect" multiple="multiple"></select>');
+        
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">1</option>');
+        }
+        
+        $('body').append($select);
+        
+        $select.multiselect({
+            buttonContainer: '<div id="multiselect-container"></div>',
+            includeSelectAllOption: true,
+            selectAllValue: 0
+        });
+        
+        expect($('#multiselect-container input[value="0"]').length).toBe(1);
+        expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
+        
+        $('#multiselect').multiselect('selectAll');
+        
+        expect($('#multiselect option:selected').length).toBe(99);
+        expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
+        
+        $('#multiselect').multiselect('deselectAll');
+        
+        expect($('#multiselect option:selected').length).toBe(0);
+        expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
+        
+        $('#multiselect-container input[value="0"]').click();
+        
+        expect($('#multiselect option:selected').length).toBe(99);
+        expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
+        
+        $('#multiselect-container input[value="0"]').click();
+        
+        expect($('#multiselect option:selected').length).toBe(0);
+        expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
+        
+        $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+    });
+});
\ No newline at end of file