Skip to content

Commit b0be6a6

Browse files
ChildishGiantChildishGiant
committed
fix(dropdown): 🐛 fix a bug with dropdown actives when used in selects
This would close #133
1 parent eb04cbf commit b0be6a6

File tree

2 files changed

+95
-1
lines changed

2 files changed

+95
-1
lines changed

‎js/dropdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@
386386
this.focusedIndex < this.dropdownEl.children.length &&
387387
this.options.autoFocus
388388
) {
389-
this.dropdownEl.children[this.focusedIndex].classList.add('active');
389+
this.dropdownEl.children[this.focusedIndex].focus();
390390
this.dropdownEl.children[this.focusedIndex].scrollIntoView({
391391
behavior: 'smooth',
392392
block: 'nearest',

‎test/html/select.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
6+
<title>Select testbed</title>
7+
<!-- CSS -->
8+
<link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
9+
10+
<style>
11+
body {
12+
padding: 16px;
13+
}
14+
.input-field{
15+
padding-bottom: 2em;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<div class="input-field col s12">
22+
<select>
23+
<option value="" disabled selected>Choose your option</option>
24+
<option value="1">Option 1</option>
25+
<option value="2">Option 2</option>
26+
<option value="3">Option 3</option>
27+
</select>
28+
<label>Materialize Select</label>
29+
</div>
30+
31+
<div class="input-field col s12">
32+
<select multiple>
33+
<option value="" disabled selected>Choose your option</option>
34+
<option value="1">Option 1</option>
35+
<option value="2">Option 2</option>
36+
<option value="3">Option 3</option>
37+
</select>
38+
<label>Materialize Multiple Select</label>
39+
</div>
40+
41+
<div class="input-field col s12">
42+
<select>
43+
<optgroup label="team 1">
44+
<option value="1">Option 1</option>
45+
<option value="2">Option 2</option>
46+
</optgroup>
47+
<optgroup label="team 2">
48+
<option value="3">Option 3</option>
49+
<option value="4">Option 4</option>
50+
</optgroup>
51+
</select>
52+
<label>Optgroups</label>
53+
</div>
54+
55+
<div class="input-field col s12 m6">
56+
<select class="icons">
57+
<option value="" disabled selected>Choose your option</option>
58+
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
59+
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
60+
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
61+
</select>
62+
<label>Images in select</label>
63+
</div>
64+
<div class="input-field col s12 m6">
65+
<select class="icons">
66+
<option value="" disabled selected>Choose your option</option>
67+
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png" class="left">example 1</option>
68+
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png" class="left">example 2</option>
69+
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png" class="left">example 3</option>
70+
</select>
71+
<label>Images in select</label>
72+
</div>
73+
74+
<label>Browser Select</label>
75+
<select class="browser-default">
76+
<option value="" disabled selected>Choose your option</option>
77+
<option value="1">Option 1</option>
78+
<option value="2">Option 2</option>
79+
<option value="3">Option 3</option>
80+
</select>
81+
82+
83+
<script src="../../../bin/materialize.js"></script>
84+
85+
<script type="text/javascript">
86+
document.addEventListener('DOMContentLoaded', function() {
87+
var elems = document.querySelectorAll('select');
88+
var instances = M.FormSelect.init(elems, {
89+
// specify options here
90+
});
91+
});
92+
</script>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)