Merge pull request #11 from JJJ/issue/2903

Issue/2903

coffee/lib/abstract-chosen.coffee

@@ -315,6 +315,8 @@ class AbstractChosen
     return false if @is_multiple and (not @display_selected_options and option.selected)
     return false if not @display_disabled_options and option.disabled
     return false if option.empty
+    return false if option.hidden
+    return false if option.group_array_index? and @results_data[option.group_array_index].hidden
 
     return true
 

coffee/lib/select-parser.coffee

@@ -18,7 +18,8 @@ class SelectParser
       label: group.label
       title: group.title if group.title
       children: 0
-      disabled: group.disabled,
+      disabled: group.disabled
+      hidden: group.hidden
       classes: group.className
     this.add_option( option, group_position, group.disabled ) for option in group.childNodes
 
@@ -36,6 +37,7 @@ class SelectParser
           title: option.title if option.title
           selected: option.selected
           disabled: if group_disabled is true then group_disabled else option.disabled
+          hidden: option.hidden
           group_array_index: group_position
           group_label: if group_position? then @parsed[group_position].label else null
           classes: option.className

public/index.html

@@ -30,7 +30,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
         <div>
           <em>Turns This</em>
           <select data-placeholder="Choose a Country..." class="select" tabindex="1">
-            <option value=""></option>
+            <option value="" selected disabled hidden>Choose a Country...</option>
             <option value="United States">United States</option>
             <option value="United Kingdom">United Kingdom</option>
             <option value="Afghanistan">Afghanistan</option>
@@ -287,7 +287,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
         <div>
           <em>Into This</em>
           <select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
-            <option value=""></option>
+            <option value="" selected disabled hidden>Choose a Country...</option>
             <option value="United States">United States</option>
             <option value="United Kingdom">United Kingdom</option>
             <option value="Afghanistan">Afghanistan</option>
@@ -1173,16 +1173,16 @@ <h2><a name="optgroup-support" class="anchor" href="#optgroup-support">&lt;optgr
         </div>
       </div>
 
-      <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-disabled-support">Selected and Disabled Support</a></h2>
+      <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-disabled-support">Selected, Disabled and Hidden Support</a></h2>
       <div class="side-by-side clearfix">
-        <p>Chosen automatically highlights selected options and removes disabled options.</p>
+        <p>Chosen automatically highlights selected options and removes disabled and / or hidden options.</p>
         <div>
           <em>Single Select</em>
           <select data-placeholder="Your Favorite Type of Bear" class="chosen-select" tabindex="7">
             <option value=""></option>
             <option>American Black Bear</option>
             <option>Asiatic Black Bear</option>
-            <option>Brown Bear</option>
+            <option hidden>Brown Bear</option>
             <option>Giant Panda</option>
             <option selected>Sloth Bear</option>
             <option disabled>Sun Bear</option>
@@ -1196,7 +1196,7 @@ <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-d
             <option value=""></option>
             <option>American Black Bear</option>
             <option>Asiatic Black Bear</option>
-            <option>Brown Bear</option>
+            <option hidden>Brown Bear</option>
             <option>Giant Panda</option>
             <option selected>Sloth Bear</option>
             <option disabled>Sun Bear</option>
@@ -1231,7 +1231,8 @@ <h2><a name="default-text-support" class="anchor" href="#default-text-support">D
       <div class="side-by-side clearfix">
         <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select an Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
         <pre><code class="language-markup">&lt;select <strong>data-placeholder="Choose a country..."</strong> multiple class="chosen-select"&gt;</code></pre>
-        <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
+        <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list - or include an element with the same label as the placeholder and set the <code class="language-javascript">hidden</code>, <code class="language-javascript">selected</code> and <code class="language-javascript">disabled</code> attributes on it for a more graceful degradation on devices Chosen does not support:</p>
+        <pre><code class="language-markup">&lt;option value="" selected disabled hidden&gt;Choose a country...&lt;/option&gt;</code></pre>
       </div>
 
       <h2><a name="no-results-text-support" class="anchor" href="#no-results-text-support">No Results Text Support</a></h2>

public/index.proto.html

@@ -31,7 +31,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
         <div>
           <em>Turns This</em>
           <select data-placeholder="Choose a Country..." class="select" tabindex="1">
-            <option value=""></option>
+            <option value="" selected disabled hidden>Choose a Country...</option>
             <option value="United States">United States</option>
             <option value="United Kingdom">United Kingdom</option>
             <option value="Afghanistan">Afghanistan</option>
@@ -288,7 +288,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
         <div>
           <em>Into This</em>
           <select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
-            <option value=""></option>
+            <option value="" selected disabled hidden>Choose a Country...</option>
             <option value="United States">United States</option>
             <option value="United Kingdom">United Kingdom</option>
             <option value="Afghanistan">Afghanistan</option>
@@ -1174,16 +1174,16 @@ <h2><a name="optgroup-support" class="anchor" href="#optgroup-support">&lt;optgr
         </div>
       </div>
 
-      <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-disabled-support">Selected and Disabled Support</a></h2>
+      <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-disabled-support">Selected, Disabled and Hidden Support</a></h2>
       <div class="side-by-side clearfix">
-        <p>Chosen automatically highlights selected options and removes disabled options.</p>
+        <p>Chosen automatically highlights selected options and removes disabled and / or hidden options.</p>
         <div>
           <em>Single Select</em>
           <select data-placeholder="Your Favorite Type of Bear" class="chosen-select" tabindex="7">
             <option value=""></option>
             <option>American Black Bear</option>
             <option>Asiatic Black Bear</option>
-            <option>Brown Bear</option>
+            <option hidden>Brown Bear</option>
             <option>Giant Panda</option>
             <option selected>Sloth Bear</option>
             <option disabled>Sun Bear</option>
@@ -1197,7 +1197,7 @@ <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-d
             <option value=""></option>
             <option>American Black Bear</option>
             <option>Asiatic Black Bear</option>
-            <option>Brown Bear</option>
+            <option hidden>Brown Bear</option>
             <option>Giant Panda</option>
             <option selected>Sloth Bear</option>
             <option disabled>Sun Bear</option>
@@ -1232,7 +1232,8 @@ <h2><a name="default-text-support" class="anchor" href="#default-text-support">D
       <div class="side-by-side clearfix">
         <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select an Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
         <pre><code class="language-markup">&lt;select <strong>data-placeholder="Choose a country..."</strong> multiple class="chosen-select"&gt;</code></pre>
-        <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
+        <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list - or include an element with the same label as the placeholder and set the <code class="language-javascript">hidden</code>, <code class="language-javascript">selected</code> and <code class="language-javascript">disabled</code> attributes on it for a more graceful degradation on devices Chosen does not support:</p>
+        <pre><code class="language-markup">&lt;option value="" selected disabled hidden&gt;Choose a country...&lt;/option&gt;</code></pre>
       </div>
 
       <h2><a name="no-results-text-support" class="anchor" href="#no-results-text-support">No Results Text Support</a></h2>

public/options.html

@@ -167,6 +167,7 @@ <h3>Example:</h3>
     &lt;option value="1"&gt;Option 1&lt;/option&gt;
     &lt;option value="2" selected&gt;Option 2&lt;/option&gt;
     &lt;option value="3" disabled&gt;Option 3&lt;/option&gt;
+    &lt;option value="4" hidden&gt;Option 4&lt;/option&gt;
   &lt;/select&gt;</code>
 </pre>
 
@@ -186,8 +187,8 @@ <h3>Example:</h3>
           <td>The attribute <code class="language-html">multiple</code> on your select box dictates whether Chosen will render a multiple or single select.</td>
         </tr>
         <tr>
-          <td>selected, disabled</td>
-          <td>Chosen automatically highlights selected options and disables disabled options.</td>
+          <td>selected, disabled, hidden</td>
+          <td>Chosen automatically highlights selected options, hides hidden options and disables disabled options.</td>
         </tr>
       </table>
 

spec/jquery/basic.spec.coffee

@@ -85,3 +85,37 @@ describe "Basic setup", ->
 
       container = div.find(".chosen-container")
       expect(container.hasClass("chosen-disabled")).toBe true
+
+  it "it should not render hidden options", ->
+    tmpl = "
+      <select data-placeholder='Choose a Country...'>
+        <option value='' hidden>Choose a Country</option>
+        <option value='United States'>United States</option>
+      </select>
+    "
+    div = $("<div>").html(tmpl)
+    select = div.find("select")
+    select.chosen()
+    container = div.find(".chosen-container")
+    container.trigger("mousedown") # open the drop
+    expect(container.find(".active-result").length).toBe 1
+
+
+  it "it should not render hidden optgroups", ->
+    tmpl = "
+      <select>
+        <optgroup label='Not shown' hidden>
+          <option value='Item1'>Item1</option>
+        </optgroup>
+        <optgroup label='Shown'>
+          <option value='Item2'>Item2</option>
+        </optgroup>
+      </select>
+    "
+    div = $("<div>").html(tmpl)
+    select = div.find("select")
+    select.chosen()
+    container = div.find(".chosen-container")
+    container.trigger("mousedown") # open the drop
+    expect(container.find(".group-result").length).toBe 1
+    expect(container.find(".active-result").length).toBe 1

spec/proto/basic.spec.coffee

@@ -99,3 +99,42 @@ describe "Basic setup", ->
 
       container = div.down(".chosen-container")
       expect(container.hasClassName("chosen-disabled")).toBe true
+
+  it "it should not render hidden options", ->
+    tmpl = "
+      <select data-placeholder='Choose a Country...'>
+        <option value='' hidden>Choose a Country</option>
+        <option value='United States'>United States</option>
+      </select>
+    "
+    div = new Element("div")
+    document.body.insert(div)
+    div.update(tmpl)
+    select = div.down("select")
+    expect(select).toBeDefined()
+    new Chosen(select)
+    container = div.down(".chosen-container")
+    simulant.fire(container, "mousedown") # open the drop
+    expect(container.select(".active-result").length).toBe 1
+
+  it "it should not render hidden optgroups", ->
+    tmpl = "
+      <select>
+        <optgroup label='Not shown' hidden>
+          <option value='Item1'>Item1</option>
+        </optgroup>
+        <optgroup label='Shown'>
+          <option value='Item2'>Item2</option>
+        </optgroup>
+      </select>
+    "
+    div = new Element("div")
+    document.body.insert(div)
+    div.update(tmpl)
+    select = div.down("select")
+    expect(select).toBeDefined()
+    new Chosen(select)
+    container = div.down(".chosen-container")
+    simulant.fire(container, "mousedown") # open the drop
+    expect(container.select(".group-result").length).toBe 1
+    expect(container.select(".active-result").length).toBe 1