3
3
* https://selectize.dev
4
4
*
5
5
* Copyright (c) 2013-2015 Brian Reavis & contributors
6
- * Copyright (c) 2020-2022 Selectize Team & contributors
6
+ * Copyright (c) 2020-2023 Selectize Team & contributors
7
7
*
8
8
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
9
9
* file except in compliance with the License. You may obtain a copy of the License at:
@@ -759,14 +759,15 @@ var autoGrow = function ($input) {
759
759
}
760
760
}
761
761
762
+ var width = $input . attr ( 'readonly' ) ? 0 : 4 ;
762
763
placeholder = $input . attr ( 'placeholder' ) ;
763
764
if ( placeholder ) {
764
- placeholderWidth = measureString ( placeholder , $input ) + 4 ;
765
+ placeholderWidth = measureString ( placeholder , $input ) + width ;
765
766
} else {
766
767
placeholderWidth = 0 ;
767
768
}
768
769
769
- width = Math . max ( measureString ( value , $input ) , placeholderWidth ) + 4 ;
770
+ width = Math . max ( measureString ( value , $input ) , placeholderWidth ) + width ;
770
771
if ( width !== currentWidth ) {
771
772
currentWidth = width ;
772
773
$input . width ( width ) ;
@@ -925,12 +926,14 @@ $.extend(Selectize.prototype, {
925
926
var classes ;
926
927
var classes_plugins ;
927
928
var inputId ;
929
+ var noArrowClass ;
928
930
929
931
inputMode = self . settings . mode ;
930
- classes = $input . attr ( 'class' ) || '' ;
932
+ classes = $input . attr ( 'class' ) || '' ;
933
+ noArrowClass = settings . showArrow ? '' : ' no-arrow' ;
931
934
932
935
$wrapper = $ ( '<div>' ) . addClass ( settings . wrapperClass ) . addClass ( classes + ' selectize-control' ) . addClass ( inputMode ) ;
933
- $control = $ ( '<div>' ) . addClass ( settings . inputClass + ' selectize-input items' ) . appendTo ( $wrapper ) ;
936
+ $control = $ ( '<div>' ) . addClass ( settings . inputClass + noArrowClass + ' selectize-input items' ) . appendTo ( $wrapper ) ;
934
937
$control_input = $ ( '<input type="text" autocomplete="new-password" autofill="no" />' ) . appendTo ( $control ) . attr ( 'tabindex' , $input . is ( ':disabled' ) ? '-1' : self . tabIndex ) ;
935
938
$dropdown_parent = $ ( settings . dropdownParent || $wrapper ) ;
936
939
$dropdown = $ ( '<div>' ) . addClass ( settings . dropdownClass ) . addClass ( inputMode + ' selectize-dropdown' ) . hide ( ) . appendTo ( $dropdown_parent ) ;
@@ -965,7 +968,7 @@ $.extend(Selectize.prototype, {
965
968
966
969
if ( ! self . settings . search ) {
967
970
$control_input . attr ( 'readonly' , true ) ;
968
- $control_input . attr ( 'inputmode' , 'none' ) ;
971
+ $control_input . attr ( 'inputmode' , 'none' ) ;
969
972
$control . css ( 'cursor' , 'pointer' ) ;
970
973
}
971
974
@@ -1031,15 +1034,13 @@ $.extend(Selectize.prototype, {
1031
1034
1032
1035
$document . on ( 'mousedown' + eventNS , function ( e ) {
1033
1036
if ( self . isFocused ) {
1034
- if ( e . target === self . $dropdown [ 0 ] || e . target . parentNode === self . $dropdown [ 0 ] ) {
1037
+ if (
1038
+ e . target === self . $dropdown [ 0 ] ||
1039
+ self . $dropdown . has ( e . target ) . length )
1040
+ {
1035
1041
return false ;
1036
1042
}
1037
- if ( self . $dropdown . has ( e . target ) . length ) {
1038
- self . ignoreBlur = true ;
1039
- window . setTimeout ( function ( ) {
1040
- self . ignoreBlur = false ;
1041
- } , 0 ) ;
1042
- } else if ( e . target !== self . $control [ 0 ] ) {
1043
+ if ( e . target !== self . $control [ 0 ] ) {
1043
1044
self . blur ( e . target ) ;
1044
1045
}
1045
1046
}
@@ -1185,28 +1186,30 @@ $.extend(Selectize.prototype, {
1185
1186
1186
1187
if ( ! self . isFocused ) {
1187
1188
if ( ! defaultPrevented ) {
1188
- window . setTimeout ( function ( ) {
1189
- self . focus ( ) ;
1190
- } , 0 ) ;
1189
+ window . setTimeout ( function ( ) {
1190
+ if ( ! self . isOpen ) {
1191
+ self . focus ( ) ;
1192
+ }
1193
+ } , 0 ) ;
1191
1194
}
1192
1195
}
1193
- if ( e . target !== self . $control_input [ 0 ] || self . $control_input . val ( ) === '' ) {
1196
+ if ( $ target !== self . $control_input [ 0 ] || self . $control_input . val ( ) === '' ) {
1194
1197
if ( self . settings . mode === 'single' ) {
1195
1198
self . isOpen ? self . close ( ) : self . open ( ) ;
1196
1199
} else {
1197
1200
if ( ! defaultPrevented ) {
1198
1201
self . setActiveItem ( null ) ;
1199
1202
}
1200
1203
if ( ! self . settings . openOnFocus ) {
1201
- if ( self . isOpen && e . target === self . lastOpenTarget ) {
1204
+ if ( self . isOpen && $ target === self . lastOpenTarget ) {
1202
1205
self . close ( ) ;
1203
1206
self . lastOpenTarget = false ;
1204
1207
} else if ( ! self . isOpen ) {
1205
1208
self . refreshOptions ( ) ;
1206
1209
self . open ( ) ;
1207
- self . lastOpenTarget = e . target ;
1210
+ self . lastOpenTarget = $ target;
1208
1211
} else {
1209
- self . lastOpenTarget = e . target ;
1212
+ self . lastOpenTarget = $ target;
1210
1213
}
1211
1214
}
1212
1215
}
@@ -1391,10 +1394,6 @@ $.extend(Selectize.prototype, {
1391
1394
onBlur : function ( e , dest ) {
1392
1395
var self = this ;
1393
1396
1394
- if ( self . ignoreBlur ) {
1395
- return ;
1396
- }
1397
-
1398
1397
if ( ! self . isFocused ) return ;
1399
1398
self . isFocused = false ;
1400
1399
@@ -2378,13 +2377,19 @@ $.extend(Selectize.prototype, {
2378
2377
var $control = this . $control ;
2379
2378
var offset = this . settings . dropdownParent === 'body' ? $control . offset ( ) : $control . position ( ) ;
2380
2379
offset . top += $control . outerHeight ( true ) ;
2381
- var w = $control [ 0 ] . getBoundingClientRect ( ) . width ;
2380
+ var w = this . $wrapper [ 0 ] . style . width !== 'fit-content' ? this . settings . dropdownParent === 'body' ? 'max-content' : '100%' : 'max-content' ;
2382
2381
if ( this . settings . minWidth && this . settings . minWidth > w )
2383
2382
{
2384
2383
w = this . settings . minWidth ;
2385
2384
}
2386
- this . $dropdown . css ( {
2385
+
2386
+ if ( this . settings . dropdownParent !== 'body' && w === 'max-content' && $control . outerWidth ( true ) >= this . $dropdown . outerWidth ( true ) ) {
2387
+ w = '100%' ;
2388
+ }
2389
+
2390
+ this . $dropdown . css ( {
2387
2391
width : w ,
2392
+ minWidth : $control . outerWidth ( true ) ,
2388
2393
top : offset . top ,
2389
2394
left : offset . left
2390
2395
} ) ;
@@ -2793,6 +2798,7 @@ Selectize.defaults = {
2793
2798
2794
2799
ignoreOnDropwdownHeight : 'img, i' ,
2795
2800
search : true ,
2801
+ showArrow : true ,
2796
2802
2797
2803
render : {
2798
2804
}
@@ -2988,8 +2994,10 @@ Selectize.define("auto_position", function () {
2988
2994
controlPosBottom - dropdownHeight - wrapperHeight >= 0 ?
2989
2995
POSITION . top :
2990
2996
POSITION . bottom ;
2997
+ const w = this . $wrapper [ 0 ] . style . width !== 'fit-content' ? this . settings . dropdownParent === 'body' ? 'max-content' : '100%' : 'max-content' ;
2991
2998
const styles = {
2992
- width : $control . outerWidth ( ) ,
2999
+ width : w ,
3000
+ minWidth : $control . outerWidth ( true ) ,
2993
3001
left : offset . left
2994
3002
} ;
2995
3003
@@ -3009,6 +3017,10 @@ Selectize.define("auto_position", function () {
3009
3017
this . $control . removeClass ( 'selectize-position-top' ) ;
3010
3018
}
3011
3019
3020
+ if ( this . settings . dropdownParent !== 'body' && w === 'max-content' && $control . outerWidth ( true ) >= this . $dropdown . outerWidth ( true ) ) {
3021
+ w = '100%' ;
3022
+ }
3023
+
3012
3024
this . $dropdown . css ( styles ) ;
3013
3025
} ;
3014
3026
} ( ) ) ;
0 commit comments