Skip to content

Commit e8f6f7f

Browse files
adamghilladamghill
committed
Do not set null value for select elements because it clears the display. #546 
1 parent cba45b0 commit e8f6f7f

File tree

3 files changed

+115
-85
lines changed

3 files changed

+115
-85
lines changed

‎django_unicorn/static/unicorn/js/element.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,8 @@ export class Element {
319319
} else if (this.el.type.toLowerCase() === "checkbox") {
320320
// Handle checkboxes
321321
this.el.checked = val;
322+
} else if (this.el.type.toLowerCase() === "select-one" && val == null) {
323+
// Do not set null value for select elements because it clears the display
322324
} else {
323325
this.el.value = val;
324326
}

‎example/unicorn/components/html_inputs.py‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
from typing import Optional
2+
13
from django_unicorn.components import UnicornView
4+
from example.coffee.models import Flavor
25

36

47
class HtmlInputsView(UnicornView):
58
is_checked = False
69
another_check = True
710
thing = "🐙"
11+
flavor: Optional[Flavor] = None
12+
flavors = Flavor.objects.none()
813
things = [
914
"alien",
1015
]
@@ -65,6 +70,9 @@ class HtmlInputsView(UnicornView):
6570
"Wyoming",
6671
)
6772

73+
def mount(self):
74+
self.flavors = Flavor.objects.all()[:3]
75+
6876
def set_name(self, name=None):
6977
if name:
7078
self.name = name

‎example/unicorn/templates/unicorn/html-inputs.html‎

Lines changed: 105 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,106 @@
11
<div>
2-
<div id="boolean-toggles-id">
3-
<h2>Checkbox</h2>
4-
<input type="checkbox" unicorn:model="is_checked" id="check">
5-
{% if is_checked %}Yes! 🦄{% else %}Nope 🙁{% endif %}
6-
</div>
7-
8-
<div unicorn:key="boolean-toggles-key">
9-
<h2>Boolean Toggles</h2>
10-
{% if another_check %}Checked ✅{% else %}Not checked ❎{% endif %}
11-
<br />
12-
<button unicorn:click="$toggle('is_checked', 'another_check')">Toggle booleans (normal)</button><br />
13-
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.key="boolean-toggles-key">Toggle booleans (partial.key)</button>
14-
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id">Toggle booleans (partial.id)</button><br />
15-
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id" u:partial.key="boolean-toggles-key">Toggle booleans (multiple partials)</button><br />
16-
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-id">Toggle booleans (partial boolean-toggles-id)</button>
17-
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-key">Toggle booleans (partial boolean-toggles-key)</button>
18-
</div>
19-
20-
<div>
21-
<h2>Select</h2>
22-
<select unicorn:model="thing" id="select">
23-
<option>🐶</option>
24-
<option>🐙</option>
25-
<option>👾</option>
26-
</select>
27-
28-
<p>
29-
Hi {{ thing }}
30-
</p>
31-
</div>
32-
33-
<div>
34-
<h2>Multiple select</h2>
35-
<select unicorn:model="things" id="select-multiple" multiple>
36-
<option value="doggo">🐶</option>
37-
<option value="octopus">🐙</option>
38-
<option value="alien">👾</option>
39-
</select>
40-
41-
<p>
42-
Howdy {{ things|join:", " }}
43-
</p>
44-
</div>
45-
46-
<div>
47-
<h2>Radio buttons</h2>
48-
<input type="radio" unicorn:model="pie" name="pie" value="blueberry"> Blueberry</input><br />
49-
<input type="radio" unicorn:model="pie" name="pie" value="apple"> Apple</input><br />
50-
<input type="radio" unicorn:model="pie" name="pie" value="cherry"> Cherry</input>
51-
52-
<p>
53-
Delicious {{ pie|upper }} pie
54-
</p>
55-
</div>
56-
57-
<div>
58-
<h2>Textarea</h2>
59-
<textarea unicorn:model="paragraph" id="textarea"></textarea>
60-
61-
<p>
62-
Number of characters: {{ paragraph|length }}
63-
64-
<button unicorn:click="paragraph=''">Clear textarea</button>
65-
</p>
66-
</div>
67-
68-
<div>
69-
<h2>Typeahead</h2>
70-
<input type="text" unicorn:model="state" placeholder="State name" id="typeahead"></input>
71-
72-
<p>
73-
Matching states:
74-
75-
{% if states %}
76-
<ul>
77-
{% for s in states %}
78-
<li>{{ s }}</li>
79-
{% endfor %}
80-
</ul>
81-
82-
<button unicorn:click="clear_states">Clear States</button>
83-
{% endif %}
84-
</p>
85-
</div>
86-
</div>
2+
<div id="boolean-toggles-id">
3+
<h2>Checkbox</h2>
4+
<input type="checkbox" unicorn:model="is_checked" id="check">
5+
{% if is_checked %}Yes! 🦄{% else %}Nope 🙁{% endif %}
6+
</div>
7+
8+
<div unicorn:key="boolean-toggles-key">
9+
<h2>Boolean Toggles</h2>
10+
{% if another_check %}Checked ✅{% else %}Not checked ❎{% endif %}
11+
<br />
12+
<button unicorn:click="$toggle('is_checked', 'another_check')">Toggle booleans (normal)</button><br />
13+
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.key="boolean-toggles-key">Toggle booleans
14+
(partial.key)</button>
15+
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id">Toggle booleans
16+
(partial.id)</button><br />
17+
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id"
18+
u:partial.key="boolean-toggles-key">Toggle booleans (multiple partials)</button><br />
19+
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-id">Toggle booleans
20+
(partial boolean-toggles-id)</button>
21+
<button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-key">Toggle booleans
22+
(partial boolean-toggles-key)</button>
23+
</div>
24+
25+
<div>
26+
<h2>Select</h2>
27+
<select unicorn:model="thing" id="select">
28+
<option>🐶</option>
29+
<option>🐙</option>
30+
<option>👾</option>
31+
</select>
32+
33+
<p>
34+
Hi {{ thing }}
35+
</p>
36+
</div>
37+
38+
<div>
39+
<h2>Default Select</h2>
40+
<select unicorn:model="flavor" id="select-default">
41+
<option value="cool">cool</option>
42+
<option value="">-- select --</option>
43+
{% for flavor in flavors %}
44+
<option value="{{ flavor }}">{{ flavor }}</option>
45+
{% endfor %}
46+
</select>
47+
48+
<p>
49+
Hi {{ flavor }}
50+
</p>
51+
</div>
52+
53+
<div>
54+
<h2>Multiple select</h2>
55+
<select unicorn:model="things" id="select-multiple" multiple>
56+
<option value="doggo">🐶</option>
57+
<option value="octopus">🐙</option>
58+
<option value="alien">👾</option>
59+
</select>
60+
61+
<p>
62+
Howdy {{ things|join:", " }}
63+
</p>
64+
</div>
65+
66+
<div>
67+
<h2>Radio buttons</h2>
68+
<input type="radio" unicorn:model="pie" name="pie" value="blueberry"> Blueberry</input><br />
69+
<input type="radio" unicorn:model="pie" name="pie" value="apple"> Apple</input><br />
70+
<input type="radio" unicorn:model="pie" name="pie" value="cherry"> Cherry</input>
71+
72+
<p>
73+
Delicious {{ pie|upper }} pie
74+
</p>
75+
</div>
76+
77+
<div>
78+
<h2>Textarea</h2>
79+
<textarea unicorn:model="paragraph" id="textarea"></textarea>
80+
81+
<p>
82+
Number of characters: {{ paragraph|length }}
83+
84+
<button unicorn:click="paragraph=''">Clear textarea</button>
85+
</p>
86+
</div>
87+
88+
<div>
89+
<h2>Typeahead</h2>
90+
<input type="text" unicorn:model="state" placeholder="State name" id="typeahead"></input>
91+
92+
<p>
93+
Matching states:
94+
95+
{% if states %}
96+
<ul>
97+
{% for s in states %}
98+
<li>{{ s }}</li>
99+
{% endfor %}
100+
</ul>
101+
102+
<button unicorn:click="clear_states">Clear States</button>
103+
{% endif %}
104+
</p>
105+
</div>
106+
</div>

0 commit comments

Comments
 (0)