From a5307a1d6dc833279e868b12399fefd5b7d107bc Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 13:33:51 +0100 Subject: [PATCH 01/12] fix: style dropdown bootstrap4/5 --- src/scss/selectize.bootstrap4.scss | 10 ++++++++++ src/scss/selectize.bootstrap5.scss | 10 +++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/scss/selectize.bootstrap4.scss b/src/scss/selectize.bootstrap4.scss index 5e39d2f4b..bf70d9eaa 100644 --- a/src/scss/selectize.bootstrap4.scss +++ b/src/scss/selectize.bootstrap4.scss @@ -171,3 +171,13 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; overflow: unset; border-radius: 0 $select-border-radius $select-border-radius 0; } + +.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top { + border-top: $select-border!important; + border-bottom: $select-border!important; + border-radius: $select-border-radius!important; +} +.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active { + border-radius: $select-border-radius!important; + border-top: $select-border!important; +} diff --git a/src/scss/selectize.bootstrap5.scss b/src/scss/selectize.bootstrap5.scss index 9422bbe99..3e35b01dd 100644 --- a/src/scss/selectize.bootstrap5.scss +++ b/src/scss/selectize.bootstrap5.scss @@ -173,11 +173,11 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; } .#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top { - border-top: $select-border; - border-bottom: $select-border; - border-radius: $select-border-radius; + border-top: $select-border!important; + border-bottom: $select-border!important; + border-radius: $select-border-radius!important; } .#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active { - border-radius: $select-border-radius; - border-top: $select-border; + border-radius: $select-border-radius!important; + border-top: $select-border!important; } From e89dfb9c16f3c169e11486a51391b6a15d6718e1 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 14:47:09 +0100 Subject: [PATCH 02/12] fix: appareance with input-group class --- src/scss/selectize.bootstrap4.scss | 16 +++++++++++++--- src/scss/selectize.bootstrap5.scss | 16 +++++++++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/scss/selectize.bootstrap4.scss b/src/scss/selectize.bootstrap4.scss index bf70d9eaa..3c8c3980e 100644 --- a/src/scss/selectize.bootstrap4.scss +++ b/src/scss/selectize.bootstrap4.scss @@ -167,11 +167,21 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; border-radius: 0; } -.input-group .#{$selectize}-input { - overflow: unset; - border-radius: 0 $select-border-radius $select-border-radius 0; +.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } +.input-group>.input-group-prepend>.btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +// .input-group .#{$selectize}-input { +// overflow: unset; +// border-radius: 0 $select-border-radius $select-border-radius 0; +// } + .#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top { border-top: $select-border!important; border-bottom: $select-border!important; diff --git a/src/scss/selectize.bootstrap5.scss b/src/scss/selectize.bootstrap5.scss index 3e35b01dd..b3ed9fc44 100644 --- a/src/scss/selectize.bootstrap5.scss +++ b/src/scss/selectize.bootstrap5.scss @@ -167,11 +167,21 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; border-radius: 0; } -.input-group .#{$selectize}-input { - overflow: unset; - border-radius: 0 $select-border-radius $select-border-radius 0; +.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } +.input-group>.input-group-prepend>.btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +// .input-group .#{$selectize}-input:is(:last-child) { +// overflow: unset; +// border-radius: 0 $select-border-radius $select-border-radius 0; +// } + .#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top { border-top: $select-border!important; border-bottom: $select-border!important; From 6fa9c85f8168307f2135e3783fc1521264301a78 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 15:36:27 +0100 Subject: [PATCH 03/12] feat: add ignoreOnDropdownHeight property --- src/defaults.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/defaults.js b/src/defaults.js index 1ef97dc43..00a3c9dbe 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -59,6 +59,7 @@ Selectize.defaults = { sizeValue: 'auto', // number of items or height value (px is default) or CSS height (px, rem, em, vh) }, normalize: false, + ignoreOnDropwdownHeight: 'img, i', /* load : null, // function(query, callback) { ... } score : null, // function(search) { ... } From f27a8427566483a0c77503ca5043824f910195ef Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 15:39:47 +0100 Subject: [PATCH 04/12] fix: calcul dropdownheight with optgroup --- src/selectize.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/selectize.js b/src/selectize.js index 462e9924b..72c900de6 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -1967,18 +1967,32 @@ $.extend(Selectize.prototype, { if (this.settings.dropdownSize.sizeType === 'numberItems') { // retrieve all items (included optgroup but exept the container .optgroup) - var $items = this.$dropdown_content.find('*').not('.optgroup, .highlight'); + var $items = this.$dropdown_content.find('*').not('.optgroup, .highlight').not(this.settings.ignoreOnDropwdownHeight); var totalHeight = 0; + var marginTop = 0; + var marginBottom = 0; for (var i = 0; i < height; i++) { var $item = $($items[i]); - if ($item.length === 0) break; + if ($item.length === 0) { + break; + } - totalHeight += $($items[i]).outerHeight(true); + totalHeight += $item.outerHeight(true); // If not selectable, it's an optgroup so we "ignore" for count items - if (typeof $item.data('selectable') == 'undefined') height++; + if (typeof $item.data('selectable') == 'undefined') { + if ($item.hasClass('optgroup-header')) { + var styles = window.getComputedStyle($item.parent()[0], ':before'); + + if (styles) { + marginTop = styles.marginTop ? Number(styles.marginTop.replace(/\W*(\w)\w*/g, '$1')) : 0; + marginBottom = styles.marginBottom ? Number(styles.marginBottom.replace(/\W*(\w)\w*/g, '$1')) : 0; + } + } + height++; + } } @@ -1986,7 +2000,7 @@ $.extend(Selectize.prototype, { var paddingTop = this.$dropdown_content.css('padding-top') ? Number(this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1')) : 0; var paddingBottom = this.$dropdown_content.css('padding-bottom') ? Number(this.$dropdown_content.css('padding-bottom').replace(/\W*(\w)\w*/g, '$1')) : 0; - height = (totalHeight + paddingTop + paddingBottom) + 'px'; + height = (totalHeight + paddingTop + paddingBottom + marginTop + marginBottom) + 'px'; } else if (this.settings.dropdownSize.sizeType !== 'fixedHeight') { console.warn('Selectize.js - Value of "sizeType" must be "fixedHeight" or "numberItems'); return; From 2a4d1c501322775fada359dd3d58732aa2fa2c05 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 16:38:02 +0100 Subject: [PATCH 05/12] fix: style for input-group class --- src/scss/selectize.bootstrap4.scss | 18 ++++++++++++------ src/scss/selectize.bootstrap5.scss | 20 ++++++++++++++++---- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/scss/selectize.bootstrap4.scss b/src/scss/selectize.bootstrap4.scss index 3c8c3980e..cbe80687f 100644 --- a/src/scss/selectize.bootstrap4.scss +++ b/src/scss/selectize.bootstrap4.scss @@ -167,14 +167,20 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; border-radius: 0; } -.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.input-group .#{$selectize}-control:not(:last-child) { + .#{$selectize}-input{ + overflow: unset; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } } -.input-group>.input-group-prepend>.btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.input-group .#{$selectize}-control:not(:first-child) { + .#{$selectize}-input{ + overflow: unset; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } // .input-group .#{$selectize}-input { diff --git a/src/scss/selectize.bootstrap5.scss b/src/scss/selectize.bootstrap5.scss index b3ed9fc44..d21f3e92b 100644 --- a/src/scss/selectize.bootstrap5.scss +++ b/src/scss/selectize.bootstrap5.scss @@ -177,10 +177,22 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; border-bottom-right-radius: 0; } -// .input-group .#{$selectize}-input:is(:last-child) { -// overflow: unset; -// border-radius: 0 $select-border-radius $select-border-radius 0; -// } + +.input-group .#{$selectize}-control:not(:last-child) { + .#{$selectize}-input{ + overflow: unset; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.input-group .#{$selectize}-control:not(:first-child) { + .#{$selectize}-input{ + overflow: unset; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} .#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top { border-top: $select-border!important; From 86226c83edff4f9abc2283637864de726e2195c0 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Thu, 3 Nov 2022 16:51:59 +0100 Subject: [PATCH 06/12] fix: add separator height to dropdown height calcul --- src/selectize.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/selectize.js b/src/selectize.js index 72c900de6..5b0efbab0 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -1971,6 +1971,7 @@ $.extend(Selectize.prototype, { var totalHeight = 0; var marginTop = 0; var marginBottom = 0; + var separatorHeight = 0; for (var i = 0; i < height; i++) { @@ -1989,6 +1990,7 @@ $.extend(Selectize.prototype, { if (styles) { marginTop = styles.marginTop ? Number(styles.marginTop.replace(/\W*(\w)\w*/g, '$1')) : 0; marginBottom = styles.marginBottom ? Number(styles.marginBottom.replace(/\W*(\w)\w*/g, '$1')) : 0; + separatorHeight = styles.borderTopWidth ? Number(styles.borderTopWidth.replace(/\W*(\w)\w*/g, '$1')) : 0; } } height++; @@ -2000,7 +2002,7 @@ $.extend(Selectize.prototype, { var paddingTop = this.$dropdown_content.css('padding-top') ? Number(this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1')) : 0; var paddingBottom = this.$dropdown_content.css('padding-bottom') ? Number(this.$dropdown_content.css('padding-bottom').replace(/\W*(\w)\w*/g, '$1')) : 0; - height = (totalHeight + paddingTop + paddingBottom + marginTop + marginBottom) + 'px'; + height = (totalHeight + paddingTop + paddingBottom + marginTop + marginBottom + separatorHeight) + 'px'; } else if (this.settings.dropdownSize.sizeType !== 'fixedHeight') { console.warn('Selectize.js - Value of "sizeType" must be "fixedHeight" or "numberItems'); return; From 5938d28e8e3036130204a0fc6d6226b9b7061b23 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Fri, 4 Nov 2022 14:50:12 +0100 Subject: [PATCH 07/12] feat: add option 'search' --- src/defaults.js | 41 +++++++++++++++++++++-------------------- src/scss/selectize.scss | 2 +- src/selectize.js | 6 ++++++ 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/defaults.js b/src/defaults.js index 058543ca0..d69f7701f 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -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: { /* diff --git a/src/scss/selectize.scss b/src/scss/selectize.scss index 6d76a91c4..89f53a232 100644 --- a/src/scss/selectize.scss +++ b/src/scss/selectize.scss @@ -326,7 +326,7 @@ $select-spinner-border-color: $select-color-border; cursor: pointer; } &.input-active, - &.input-active input { + &.input-active input:not(:read-only) { cursor: text; } diff --git a/src/selectize.js b/src/selectize.js index 9faac20cf..8ea67f2ad 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -158,6 +158,12 @@ $.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); + $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, '\\$&'); From ddd62bd6a30ae011bdad404d7264e31a503aaf5a Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Fri, 4 Nov 2022 15:29:17 +0100 Subject: [PATCH 08/12] test: add test for normalize/search options --- test/api.js | 17 +++++++++++++++++ test/setup.js | 25 ++++++++++++++++++++----- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/test/api.js b/test/api.js index ac7d2f473..6c3665c39 100644 --- a/test/api.js +++ b/test/api.js @@ -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('', { 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); + }); }); }); diff --git a/test/setup.js b/test/setup.js index 70cf81261..9f8cbf892 100644 --- a/test/setup.js +++ b/test/setup.js @@ -217,12 +217,10 @@ beforeEach(function() { test = setup_test('', { - dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 } - }); + ''); }); - 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 () { @@ -231,6 +229,24 @@ }, 0); }); }); + + it('should respect input readonly (option search = false)', function () { + var test; + + beforeEach(function() { + test = setup_test('', { 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('