Skip to content

Commit 3aa6cd6

Browse files
brianreavisbrianreavis
committed
Bugfixes for locking behavior + examples.
1 parent 382dde0 commit 3aa6cd6

File tree

2 files changed

+85
-10
lines changed

2 files changed

+85
-10
lines changed

‎examples/lock.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
3+
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
4+
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
5+
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>Selectize.js Demo</title>
10+
<meta name="description" content="">
11+
<meta name="viewport" content="width=device-width">
12+
<link rel="stylesheet" href="_normalize.css">
13+
<link rel="stylesheet" href="_stylesheet.css">
14+
<link rel="stylesheet" href="../selectize.css">
15+
<script src="_jquery.js"></script>
16+
<script src="../selectize.js"></script>
17+
<script src="_demos.js"></script>
18+
</head>
19+
<body>
20+
<div id="wrapper">
21+
<h1>Selectize.js</h1>
22+
<div class="demo">
23+
<h2>Locking</h2>
24+
<p>Selectize controls can be locked to prevent user interaction.</p>
25+
<div class="control-group">
26+
<label for="select-locked-empty">Locked (empty):</label>
27+
<select id="select-locked-empty" multiple placeholder="No input allowed...">
28+
<option value="A">Option A</option>
29+
<option value="B">Option B</option>
30+
<option value="C">Option C</option>
31+
</select>
32+
</div>
33+
<div class="control-group">
34+
<label for="select-locked-single">Locked (single):</label>
35+
<select id="select-locked-single" placeholder="No input allowed...">
36+
<option value="A">Option A</option>
37+
<option value="B" selected>Option B</option>
38+
<option value="C">Option C</option>
39+
</select>
40+
</div>
41+
<div class="control-group">
42+
<label for="select-locked">Locked:</label>
43+
<select id="select-locked" multiple placeholder="No input allowed...">
44+
<option value="A">Option A</option>
45+
<option value="B" selected>Option B</option>
46+
<option value="C" selected>Option C</option>
47+
</select>
48+
</div>
49+
<div class="control-group">
50+
<label for="select-unlocked">Unlocked:</label>
51+
<select id="select-unlocked" multiple placeholder="Input allowed...">
52+
<option value="A">Option A</option>
53+
<option value="B">Option B</option>
54+
<option value="C">Option C</option>
55+
</select>
56+
</div>
57+
<script>
58+
$('select').selectize({create: true});
59+
$('#select-locked-empty')[0].selectize.lock();
60+
$('#select-locked-single')[0].selectize.lock();
61+
$('#select-locked')[0].selectize.lock();
62+
</script>
63+
</div>
64+
</div>
65+
</body>
66+
</html>

‎src/selectize.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ Selectize.prototype.setup = function() {
154154
else if (e.keyCode === KEY_SHIFT) self.isShiftDown = false;
155155
},
156156
mousedown: function(e) {
157-
if (self.isFocused && !self.isLocked) {
157+
if (self.isFocused) {
158158
// prevent events on the dropdown scrollbar from causing the control to blur
159159
if (e.target === self.$dropdown[0]) {
160160
var ignoreFocus = self.ignoreFocus;
@@ -220,7 +220,7 @@ Selectize.prototype.trigger = function(event) {
220220
* @returns {boolean}
221221
*/
222222
Selectize.prototype.onKeyPress = function(e) {
223-
if (this.isLocked) return;
223+
if (this.isLocked) return e && e.preventDefault();
224224
var character = String.fromCharCode(e.keyCode || e.which);
225225
if (this.settings.create && character === this.settings.delimiter) {
226226
this.createItem();
@@ -236,10 +236,17 @@ Selectize.prototype.onKeyPress = function(e) {
236236
* @returns {boolean}
237237
*/
238238
Selectize.prototype.onKeyDown = function(e) {
239-
if (this.isLocked) return;
239+
var keyCode = e.keyCode || e.which;
240240
var isInput = e.target === this.$control_input[0];
241241

242-
switch (e.keyCode || e.which) {
242+
if (this.isLocked) {
243+
if (keyCode !== KEY_TAB) {
244+
e.preventDefault();
245+
}
246+
return;
247+
}
248+
249+
switch (keyCode) {
243250
case KEY_ESC:
244251
this.blur();
245252
return;
@@ -299,7 +306,7 @@ Selectize.prototype.onKeyDown = function(e) {
299306
* @returns {boolean}
300307
*/
301308
Selectize.prototype.onKeyUp = function(e) {
302-
if (this.isLocked) return;
309+
if (this.isLocked) return e && e.preventDefault();
303310
var value = this.$control_input.val() || '';
304311
if (this.lastValue !== value) {
305312
this.lastValue = value;
@@ -1108,7 +1115,6 @@ Selectize.prototype.createItem = function() {
11081115
var caret = this.caretPos;
11091116
if (!input.length) return;
11101117
this.lock();
1111-
this.close();
11121118

11131119
var setup = (typeof this.settings.create === 'function') ? this.settings.create : function(input) {
11141120
var data = {};
@@ -1159,9 +1165,11 @@ Selectize.prototype.refreshItems = function() {
11591165
*/
11601166
Selectize.prototype.refreshClasses = function() {
11611167
var isFull = this.isFull();
1168+
var isLocked = this.isLocked;
1169+
this.$control.toggleClass('locked', isLocked);
11621170
this.$control.toggleClass('full', isFull).toggleClass('not-full', !isFull);
11631171
this.$control.toggleClass('has-items', this.items.length > 0);
1164-
this.$control_input.data('grow', !isFull);
1172+
this.$control_input.data('grow', !isFull && !isLocked);
11651173
};
11661174

11671175
/**
@@ -1221,7 +1229,7 @@ Selectize.prototype.updatePlaceholder = function() {
12211229
* the available options.
12221230
*/
12231231
Selectize.prototype.open = function() {
1224-
if (this.isOpen || (this.settings.mode === 'multi' && this.isFull())) return;
1232+
if (this.isLocked || this.isOpen || (this.settings.mode === 'multi' && this.isFull())) return;
12251233
this.isOpen = true;
12261234
this.positionDropdown();
12271235
this.$control.addClass('dropdown-active');
@@ -1414,16 +1422,17 @@ Selectize.prototype.setCaret = function(i, focus) {
14141422
* items are being asynchronously created.
14151423
*/
14161424
Selectize.prototype.lock = function() {
1425+
this.close();
14171426
this.isLocked = true;
1418-
this.$control.addClass('locked');
1427+
this.refreshClasses();
14191428
};
14201429

14211430
/**
14221431
* Re-enables user input on the control.
14231432
*/
14241433
Selectize.prototype.unlock = function() {
14251434
this.isLocked = false;
1426-
this.$control.removeClass('locked');
1435+
this.refreshClasses();
14271436
};
14281437

14291438
/**

0 commit comments

Comments
 (0)