Skip to content

Commit 6353f7a

Browse files
acburstacburst
committed
Made select not display none to fix form validation error
1 parent 12beb58 commit 6353f7a

File tree

3 files changed

+44
-28
lines changed

3 files changed

+44
-28
lines changed

‎js/select.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,10 @@
165165
this.wrapper = document.createElement('div');
166166
$(this.wrapper).addClass('select-wrapper ' + this.options.classes);
167167
this.$el.before($(this.wrapper));
168-
this.wrapper.appendChild(this.el);
168+
// Move actual select element into overflow hidden wrapper
169+
let $hideSelect = $('<div class="hide-select"></div>');
170+
$(this.wrapper).append($hideSelect);
171+
$hideSelect[0].appendChild(this.el);
169172

170173
if (this.el.disabled) {
171174
this.wrapper.classList.add('disabled');
@@ -207,7 +210,7 @@
207210
});
208211
}
209212

210-
this.$el.after(this.dropdownOptions);
213+
$(this.wrapper).append(this.dropdownOptions);
211214

212215
// Add input dropdown
213216
this.input = document.createElement('input');
@@ -219,14 +222,14 @@
219222
$(this.input).prop('disabled', 'true');
220223
}
221224

222-
this.$el.before(this.input);
225+
$(this.wrapper).prepend(this.input);
223226
this._setValueToInput();
224227

225228
// Add caret
226229
let dropdownIcon = $(
227230
'<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
228231
);
229-
this.$el.before(dropdownIcon[0]);
232+
$(this.wrapper).prepend(dropdownIcon[0]);
230233

231234
// Initialize dropdown
232235
if (!this.el.disabled) {

‎sass/components/forms/_select.scss

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
/* Select Field
22
========================================================================== */
33

4-
select { display: none; }
5-
select.browser-default { display: block; }
6-
4+
select.browser-default { opacity: 1; }
75
select {
6+
opacity: 0;
87
background-color: $select-background;
98
width: 100%;
109
padding: $select-padding;
@@ -92,6 +91,17 @@ select {
9291
top: -26px;
9392
font-size: $label-font-size;
9493
}
94+
95+
// Hide select with overflow hidden instead of using display none
96+
// (this prevents form validation errors with hidden form elements)
97+
.hide-select {
98+
width: 0;
99+
height: 0;
100+
overflow: hidden;
101+
position: absolute;
102+
top: 0;
103+
z-index: -1;
104+
}
95105
}
96106

97107
// Disabled styles

‎tests/spec/select/selectSpec.js

+24-21
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ describe("Select Plugin", function () {
55
});
66

77
describe("Select", function () {
8-
var browserSelect, normalInput, normalDropdown;
8+
var browserSelect, normalInput, normalDropdown, selectInstance;
99

1010
beforeEach(function() {
1111
$('select').formSelect();
1212
browserSelect = $('select.normal');
13+
selectInstance = M.FormSelect.getInstance(browserSelect[0]);
1314
});
1415

1516
it("should open dropdown and select option", function (done) {
16-
normalInput = browserSelect.parent().find('input.select-dropdown');
17-
normalDropdown = browserSelect.parent().find('ul.select-dropdown');
17+
normalInput = $(selectInstance.wrapper).find('input.select-dropdown');
18+
normalDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
1819

1920
expect(normalInput).toExist('Should dynamically generate select dropdown structure.');
2021
expect(normalDropdown).toExist('Should dynamically generate select dropdown structure.');
@@ -38,8 +39,8 @@ describe("Select Plugin", function () {
3839
});
3940

4041
it("should have pre-selected value", function () {
41-
normalInput = browserSelect.parent().find('input.select-dropdown');
42-
normalDropdown = browserSelect.parent().find('ul.select-dropdown');
42+
normalInput = $(selectInstance.wrapper).find('input.select-dropdown');
43+
normalDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
4344

4445
var firstOption = browserSelect.find('option[selected]');
4546
expect(normalInput.val()).toEqual(firstOption.text(), 'Value should be equal to preselected option.');
@@ -51,8 +52,8 @@ describe("Select Plugin", function () {
5152
});
5253

5354
it("should getSelectedValues correctly", function(done) {
54-
normalInput = browserSelect.parent().find('input.select-dropdown');
55-
normalDropdown = browserSelect.parent().find('ul.select-dropdown');
55+
normalInput = $(selectInstance.wrapper).find('input.select-dropdown');
56+
normalDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
5657

5758
expect(browserSelect[0].M_FormSelect.getSelectedValues()).toEqual([browserSelect[0].value], 'Should equal initial selected value');
5859

@@ -73,15 +74,16 @@ describe("Select Plugin", function () {
7374
});
7475

7576
describe("Multiple Select", function () {
76-
var browserSelect, multipleInput, multipleDropdown;
77+
var browserSelect, multipleInput, multipleDropdown, selectInstance;
7778

7879
beforeEach(function() {
7980
browserSelect = $('select.multiple');
81+
selectInstance = M.FormSelect.getInstance(browserSelect[0]);
8082
});
8183

8284
it("should open dropdown and select multiple options", function(done) {
83-
multipleInput = browserSelect.parent().find('input.select-dropdown');
84-
multipleDropdown = browserSelect.parent().find('ul.select-dropdown');
85+
multipleInput = $(selectInstance.wrapper).find('input.select-dropdown');
86+
multipleDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
8587

8688
expect(multipleInput).toExist('Should dynamically generate select dropdown structure.');
8789
expect(multipleDropdown).toExist('Should dynamically generate select dropdown structure.');
@@ -108,8 +110,8 @@ describe("Select Plugin", function () {
108110
});
109111

110112
it("should open dropdown and deselect multiple options", function(done) {
111-
multipleInput = browserSelect.parent().find('input.select-dropdown');
112-
multipleDropdown = browserSelect.parent().find('ul.select-dropdown');
113+
multipleInput = $(selectInstance.wrapper).find('input.select-dropdown');
114+
multipleDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
113115

114116
expect(multipleInput).toExist('Should dynamically generate select dropdown structure.');
115117
expect(multipleDropdown).toExist('Should dynamically generate select dropdown structure.');
@@ -139,8 +141,8 @@ describe("Select Plugin", function () {
139141
});
140142

141143
it("should have multiple pre-selected values", function () {
142-
multipleInput = browserSelect.parent().find('input.select-dropdown');
143-
multipleDropdown = browserSelect.parent().find('ul.select-dropdown');
144+
multipleInput = $(selectInstance.wrapper).find('input.select-dropdown');
145+
multipleDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
144146

145147
var secondOption = browserSelect.find('option[selected]').eq(0);
146148
var thirdOption = browserSelect.find('option[selected]').eq(1);
@@ -149,15 +151,16 @@ describe("Select Plugin", function () {
149151
});
150152

151153
describe("Optgroup Select", function () {
152-
var browserSelect, optInput, optDropdown, optionInOptgroup, optionAfterOptGroup;
154+
var browserSelect, optInput, optDropdown, optionInOptgroup, optionAfterOptGroup, selectInstance;
153155

154156
beforeEach(function() {
155157
browserSelect = $('select.optgroup');
158+
selectInstance = M.FormSelect.getInstance(browserSelect[0]);
156159
});
157160

158161
it("should open dropdown and select options", function(done) {
159-
optInput = browserSelect.parent().find('input.select-dropdown');
160-
optDropdown = browserSelect.parent().find('ul.select-dropdown');
162+
optInput = $(selectInstance.wrapper).find('input.select-dropdown');
163+
optDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
161164

162165
var optgroups = optDropdown.find('li.optgroup');
163166
browserSelect.find('optgroup').each(function(i) {
@@ -186,16 +189,16 @@ describe("Select Plugin", function () {
186189
});
187190

188191
it("should have options inside optgroup indented", function() {
189-
optionInOptgroup = browserSelect.parent().find('li.optgroup + li');
190-
optionAfterOptGroup = browserSelect.parent().find('ul li:last-child');
192+
optionInOptgroup = $(selectInstance.wrapper).find('li.optgroup + li');
193+
optionAfterOptGroup = $(selectInstance.wrapper).find('ul li:last-child');
191194

192195
expect(optionInOptgroup).toHaveClass('optgroup-option', 'Should have optgroup-option class');
193196
expect(optionAfterOptGroup).not.toHaveClass('optgroup-option', 'Should not have optgroup-option class');
194197
});
195198

196199
it("should not do anything when optgroup li clicked", function(done) {
197-
optInput = browserSelect.parent().find('input.select-dropdown');
198-
optDropdown = browserSelect.parent().find('ul.select-dropdown');
200+
optInput = $(selectInstance.wrapper).find('input.select-dropdown');
201+
optDropdown = $(selectInstance.wrapper).find('ul.select-dropdown');
199202
var originalVal = optInput.val();
200203

201204
var optgroups = optDropdown.find('li.optgroup');

0 commit comments

Comments
 (0)