Skip to content

several fix and enhancements #1906

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.

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

Merged
merged 18 commits into from
Nov 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
41 changes: 21 additions & 20 deletions src/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,26 +61,27 @@ Selectize.defaults = {
},
normalize: false,
ignoreOnDropwdownHeight: 'img, i',
/*
load : null, // function(query, callback) { ... }
score : null, // function(search) { ... }
formatValueToKey : null, // function(key) { ... }
onInitialize : null, // function() { ... }
onChange : null, // function(value) { ... }
onItemAdd : null, // function(value, $item) { ... }
onItemRemove : null, // function(value, $item) { ... }
onClear : null, // function() { ... }
onOptionAdd : null, // function(value, data) { ... }
onOptionRemove : null, // function(value) { ... }
onOptionClear : null, // function() { ... }
onOptionGroupAdd : null, // function(id, data) { ... }
onOptionGroupRemove : null, // function(id) { ... }
onOptionGroupClear : null, // function() { ... }
onDropdownOpen : null, // function($dropdown) { ... }
onDropdownClose : null, // function($dropdown) { ... }
onType : null, // function(str) { ... }
onDelete : null, // function(values) { ... }
*/
search: true,
/*
load : null, // function(query, callback) { ... }
score : null, // function(search) { ... }
formatValueToKey : null, // function(key) { ... }
onInitialize : null, // function() { ... }
onChange : null, // function(value) { ... }
onItemAdd : null, // function(value, $item) { ... }
onItemRemove : null, // function(value, $item) { ... }
onClear : null, // function() { ... }
onOptionAdd : null, // function(value, data) { ... }
onOptionRemove : null, // function(value) { ... }
onOptionClear : null, // function() { ... }
onOptionGroupAdd : null, // function(id, data) { ... }
onOptionGroupRemove : null, // function(id) { ... }
onOptionGroupClear : null, // function() { ... }
onDropdownOpen : null, // function($dropdown) { ... }
onDropdownClose : null, // function($dropdown) { ... }
onType : null, // function(str) { ... }
onDelete : null, // function(values) { ... }
*/

render: {
/*
Expand Down
16 changes: 13 additions & 3 deletions src/scss/selectize.scss
Original file line number Diff line number Diff line change
Expand Up @@ -270,15 +270,25 @@ $select-spinner-border-color: $select-color-border;
cursor: default;
}
.active {
background-color: $select-color-dropdown-item-active;
color: $select-color-dropdown-item-active-text;
background-color: $select-color-item-active;
color: $select-color-item-active-text;
&.create {
color: $select-color-dropdown-item-create-active-text;
}
}

.selected {
background-color: $select-color-item-active;
color: $select-color-item-active-text;
}
.create {
color: $select-color-dropdown-item-create-text;
}

.active:not(.selected) {
background: $select-color-dropdown-item-active;
color: $select-color-dropdown-item-active-text;
}
}

.#{$selectize}-dropdown-content {
Expand Down Expand Up @@ -326,7 +336,7 @@ $select-spinner-border-color: $select-color-border;
cursor: pointer;
}
&.input-active,
&.input-active input {
&.input-active input:not(:read-only) {
cursor: text;
}

Expand Down
7 changes: 7 additions & 0 deletions src/selectize.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,13 @@ $.extend(Selectize.prototype, {
$control_input.attr('placeholder', settings.placeholder);
}

// to have an identical rendering to a simple select (usefull for mobile device and do not open keyboard)
if (!self.settings.search) {
$control_input.attr('readonly', true);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a problem with ReadOnly.

If the person clicks on the input and types something on the physical keyboard the input will remain empty, but selectize will filter the items and will work anyway.

To fix this just listen to the focus event and when the input receives focus you apply a blur. That way the input will never be focused and the person will never be able to type anything and we won't have any problems.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A suggestion also to prevent the keyboard on mobile devices is to use $control_input.attr("inputmode", "none");

Some mobile browsers ignore the read_only property and show the keyboard anyway. But they respect input_mode.

The ideal is to have the 2 codes, read_only and input_mode none.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you so much for your feedback, I fixed that !

$control_input.attr('inputmode', 'none');
$control.css('cursor', 'pointer');
}

// if splitOn was not passed in, construct it from the delimiter to allow pasting universally
if (!self.settings.splitOn && self.settings.delimiter) {
var delimiterEscaped = self.settings.delimiter.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
Expand Down
17 changes: 17 additions & 0 deletions test/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -632,6 +632,23 @@
});
test.selectize.search('hello');
}).to.not.throw(Error);
});
it('should normalize a string', function () {
var test;

beforeEach(function() {
test = setup_test('<select>' +
'<option value="a">A</option>' +
'</select>', { normalize: true });
});

it('should return query satinized', function() {
var query = test.selectize.search('héllo').query;

window.setTimeout(function () {
expect(query).to.be.equal('hello');
}, 0);
});
});
});

Expand Down
25 changes: 20 additions & 5 deletions test/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -217,12 +217,10 @@
beforeEach(function() {
test = setup_test('<select>' +
'<option value="a" style="color:red;" class="a">A</option>' +
'</select>', {
dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
});
'</select>');
});

it('should dropdown height to be equal 100', function(done) {
it('should dropdown height to be equal 100', function() {
test.selectize.focus();

window.setTimeout(function () {
Expand All @@ -231,6 +229,24 @@
}, 0);
});
});

it('should respect input readonly (option search = false)', function () {
var test;

beforeEach(function() {
test = setup_test('<select>' +
'<option value="a">A</option>' +
'</select>', { search: false });
});

it('should readonly on input and cursor pointer on input and control element', function () {
window.setTimeout(function () {
expect(test.selectize.$dropdown_input.attr('readonly')).to.be.equal('readonly');
expect(test.selectize.$dropdown_input.css('cursor')).to.be.equal('pointer');
expect(test.selectize.$control.css('cursor')).to.be.equal('pointer');
}, 0);
});
});
describe('getValue()', function() {
it('should return "" when empty', function() {
var test = setup_test('<select>', {});
Expand Down Expand Up @@ -470,7 +486,6 @@
}, 0);
});
});

});

})();