Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support hidden property on option and optgroup elements. #2903

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Support hidden property on option and optgroup elements. #2903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d173c9a
Support hidden property on option and optgroup elements.
Mikk3lRo Oct 7, 2017
779a76d
Found another reference on the options page.
Mikk3lRo Oct 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions coffee/lib/abstract-chosen.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,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

Expand Down
4 changes: 3 additions & 1 deletion coffee/lib/select-parser.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
Expand Down
15 changes: 8 additions & 7 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions public/index.proto.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions public/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,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>

Expand All @@ -181,8 +182,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>

Expand Down
34 changes: 34 additions & 0 deletions spec/jquery/basic.spec.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
39 changes: 39 additions & 0 deletions spec/proto/basic.spec.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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