33 * https://selectize.dev
44 *
55 * Copyright (c) 2013-2015 Brian Reavis & contributors
6- * Copyright (c) 2020-2022 Selectize Team & contributors
6+ * Copyright (c) 2020-2023 Selectize Team & contributors
77 *
88 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
99 * file except in compliance with the License. You may obtain a copy of the License at:
@@ -759,14 +759,15 @@ var autoGrow = function ($input) {
759759 }
760760 }
761761
762+ var width = $input . attr ( 'readonly' ) ? 0 : 4 ;
762763 placeholder = $input . attr ( 'placeholder' ) ;
763764 if ( placeholder ) {
764- placeholderWidth = measureString ( placeholder , $input ) + 4 ;
765+ placeholderWidth = measureString ( placeholder , $input ) + width ;
765766 } else {
766767 placeholderWidth = 0 ;
767768 }
768769
769- width = Math . max ( measureString ( value , $input ) , placeholderWidth ) + 4 ;
770+ width = Math . max ( measureString ( value , $input ) , placeholderWidth ) + width ;
770771 if ( width !== currentWidth ) {
771772 currentWidth = width ;
772773 $input . width ( width ) ;
@@ -925,12 +926,14 @@ $.extend(Selectize.prototype, {
925926 var classes ;
926927 var classes_plugins ;
927928 var inputId ;
929+ var noArrowClass ;
928930
929931 inputMode = self . settings . mode ;
930- classes = $input . attr ( 'class' ) || '' ;
932+ classes = $input . attr ( 'class' ) || '' ;
933+ noArrowClass = settings . showArrow ? '' : ' no-arrow' ;
931934
932935 $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 ) ;
934937 $control_input = $ ( '<input type="text" autocomplete="new-password" autofill="no" />' ) . appendTo ( $control ) . attr ( 'tabindex' , $input . is ( ':disabled' ) ? '-1' : self . tabIndex ) ;
935938 $dropdown_parent = $ ( settings . dropdownParent || $wrapper ) ;
936939 $dropdown = $ ( '<div>' ) . addClass ( settings . dropdownClass ) . addClass ( inputMode + ' selectize-dropdown' ) . hide ( ) . appendTo ( $dropdown_parent ) ;
@@ -965,7 +968,7 @@ $.extend(Selectize.prototype, {
965968
966969 if ( ! self . settings . search ) {
967970 $control_input . attr ( 'readonly' , true ) ;
968- $control_input . attr ( 'inputmode' , 'none' ) ;
971+ $control_input . attr ( 'inputmode' , 'none' ) ;
969972 $control . css ( 'cursor' , 'pointer' ) ;
970973 }
971974
@@ -1031,15 +1034,13 @@ $.extend(Selectize.prototype, {
10311034
10321035 $document . on ( 'mousedown' + eventNS , function ( e ) {
10331036 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+ {
10351041 return false ;
10361042 }
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 ] ) {
10431044 self . blur ( e . target ) ;
10441045 }
10451046 }
@@ -1185,28 +1186,30 @@ $.extend(Selectize.prototype, {
11851186
11861187 if ( ! self . isFocused ) {
11871188 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 ) ;
11911194 }
11921195 }
1193- if ( e . target !== self . $control_input [ 0 ] || self . $control_input . val ( ) === '' ) {
1196+ if ( $ target !== self . $control_input [ 0 ] || self . $control_input . val ( ) === '' ) {
11941197 if ( self . settings . mode === 'single' ) {
11951198 self . isOpen ? self . close ( ) : self . open ( ) ;
11961199 } else {
11971200 if ( ! defaultPrevented ) {
11981201 self . setActiveItem ( null ) ;
11991202 }
12001203 if ( ! self . settings . openOnFocus ) {
1201- if ( self . isOpen && e . target === self . lastOpenTarget ) {
1204+ if ( self . isOpen && $ target === self . lastOpenTarget ) {
12021205 self . close ( ) ;
12031206 self . lastOpenTarget = false ;
12041207 } else if ( ! self . isOpen ) {
12051208 self . refreshOptions ( ) ;
12061209 self . open ( ) ;
1207- self . lastOpenTarget = e . target ;
1210+ self . lastOpenTarget = $ target;
12081211 } else {
1209- self . lastOpenTarget = e . target ;
1212+ self . lastOpenTarget = $ target;
12101213 }
12111214 }
12121215 }
@@ -1391,10 +1394,6 @@ $.extend(Selectize.prototype, {
13911394 onBlur : function ( e , dest ) {
13921395 var self = this ;
13931396
1394- if ( self . ignoreBlur ) {
1395- return ;
1396- }
1397-
13981397 if ( ! self . isFocused ) return ;
13991398 self . isFocused = false ;
14001399
@@ -2378,13 +2377,19 @@ $.extend(Selectize.prototype, {
23782377 var $control = this . $control ;
23792378 var offset = this . settings . dropdownParent === 'body' ? $control . offset ( ) : $control . position ( ) ;
23802379 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' ;
23822381 if ( this . settings . minWidth && this . settings . minWidth > w )
23832382 {
23842383 w = this . settings . minWidth ;
23852384 }
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 ( {
23872391 width : w ,
2392+ minWidth : $control . outerWidth ( true ) ,
23882393 top : offset . top ,
23892394 left : offset . left
23902395 } ) ;
@@ -2793,6 +2798,7 @@ Selectize.defaults = {
27932798
27942799 ignoreOnDropwdownHeight : 'img, i' ,
27952800 search : true ,
2801+ showArrow : true ,
27962802
27972803 render : {
27982804 }
@@ -2988,8 +2994,10 @@ Selectize.define("auto_position", function () {
29882994 controlPosBottom - dropdownHeight - wrapperHeight >= 0 ?
29892995 POSITION . top :
29902996 POSITION . bottom ;
2997+ const w = this . $wrapper [ 0 ] . style . width !== 'fit-content' ? this . settings . dropdownParent === 'body' ? 'max-content' : '100%' : 'max-content' ;
29912998 const styles = {
2992- width : $control . outerWidth ( ) ,
2999+ width : w ,
3000+ minWidth : $control . outerWidth ( true ) ,
29933001 left : offset . left
29943002 } ;
29953003
@@ -3009,6 +3017,10 @@ Selectize.define("auto_position", function () {
30093017 this . $control . removeClass ( 'selectize-position-top' ) ;
30103018 }
30113019
3020+ if ( this . settings . dropdownParent !== 'body' && w === 'max-content' && $control . outerWidth ( true ) >= this . $dropdown . outerWidth ( true ) ) {
3021+ w = '100%' ;
3022+ }
3023+
30123024 this . $dropdown . css ( styles ) ;
30133025 } ;
30143026 } ( ) ) ;
0 commit comments