✨ new(select): multi-select new variation.

assets/scss/forms-appearance/_default.scss

@@ -638,6 +638,30 @@
 						color: $dropdown-active--color;
 					}
 				}
+
+				&[aria-multiselectable="true"] {
+					.select2-results__option--selected {
+						background-color: $dropdown-active--background;
+						color: $dropdown-active--color;
+
+						.forminator-checkbox {
+							.forminator-checkbox-box {
+								border-color: $dropdown-active--background;
+							}
+						} 
+					}
+				}
+			}
+		}
+
+		// Checkbox in dropdown
+		.forminator-checkbox {
+			.forminator-checkbox-box {
+				background: $dropdown-active--color;
+
+				&::before {
+					color: $dropdown-active--background;
+				}
 			}
 		}
 	}

form-ui.html

@@ -1046,7 +1046,7 @@ <h1>Forminator Forms</h1>
 				<div class="forminator-field">
 					<label class="forminator-label">Field label <span class="forminator-required">*</span></label>
 					<select placeholder="Placeholder"
-						class="forminator-select">
+						class="forminator-select2">
 						<option>Option 1</option>
 						<option>Option 2</option>
 						<option>Option 3</option>

library/js/select2.full.js

@@ -1740,11 +1740,14 @@
 
 			MultipleSelection.prototype.render = function () {
 				var $selection = MultipleSelection.__super__.render.call(this);
-
 				$selection[0].classList.add('select2-selection--multiple');
 
+				// Assign FUI icon to select button. @edited
 				$selection.html(
-				'<ul class="select2-selection__rendered"></ul>'
+					'<ul class="select2-selection__rendered"></ul>' +
+					'<span class="select2-selection__arrow" role="presentation">' +
+						'<span class="forminator-icon-chevron-down" aria-hidden="true"></span>' +
+					'</span>'
 				);
 
 				return $selection;
@@ -1803,6 +1806,9 @@
 				var $rendered = this.$selection.find('.select2-selection__rendered');
 				$rendered.empty();
 				$rendered.removeAttr('title');
+
+				// @edit remove class when the items cleared.
+				$rendered.removeClass('forminator-select2-selections');
 			};
 
 			MultipleSelection.prototype.display = function (data, container) {
@@ -1815,11 +1821,11 @@
 			MultipleSelection.prototype.selectionContainer = function () {
 				var $container = $(
 				'<li class="select2-selection__choice">' +
+					'<span class="select2-selection__choice__display"></span>' +
 					'<button type="button" class="select2-selection__choice__remove" ' +
-					'tabindex="-1">' +
-					'<span aria-hidden="true">&times;</span>' +
+						'tabindex="-1">' +
+						'<span aria-hidden="true">&times;</span>' +
 					'</button>' +
-					'<span class="select2-selection__choice__display"></span>' +
 				'</li>'
 				);
 
@@ -1878,6 +1884,9 @@
 				}
 
 				var $rendered = this.$selection.find('.select2-selection__rendered');
+
+				// @edit add class when the items selected.
+				$rendered.addClass('forminator-select2-selections');
 
 				$rendered.append($selections);
 			};
@@ -5117,7 +5126,7 @@
 
 				if (options.dropdownAdapter == null) {
 				if (options.multiple) {
-					options.dropdownAdapter = Dropdown;
+					options.dropdownAdapter = Utils.Decorate(Dropdown, DropdownSearch);
 				} else {
 					var SearchableDropdown = Utils.Decorate(Dropdown, DropdownSearch);
 
@@ -5173,12 +5182,12 @@
 					);
 				}
 
-				if (options.multiple) {
-					options.selectionAdapter = Utils.Decorate(
-					options.selectionAdapter,
-					SelectionSearch
-					);
-				}
+				// if (options.multiple) {
+				// 	options.selectionAdapter = Utils.Decorate(
+				// 	options.selectionAdapter,
+				// 	SelectionSearch
+				// 	);
+				// }
 
 				if (options.selectionCssClass != null) {
 					options.selectionAdapter = Utils.Decorate(

library/js/select2.js

@@ -8,6 +8,39 @@
 		window.FUI = {};
 	}
 
+	FUI.select = {};
+
+	FUI.select.escapeJS = ( string ) => {
+
+        // Create a temporary <div> element using jQuery and set the HTML content.
+        var div = $( '<div>' ).html( string );
+
+        // Get the text content of the <div> element and remove script tags
+        var text = div.text().replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
+
+        // Return the escaped text
+        return text;
+    };
+
+	FUI.select.formatCheckbox = ( data, container ) => {
+		const label = FUI.select.escapeJS( data.text );
+		const selected = data.selected;
+		let markup,
+			id = label.toLowerCase().replace( /\s+/g, '-' );
+
+		if ( data.id ) {
+			id = data.id;
+		}
+
+		markup 	=	'<label for="' + id + '" class="forminator-checkbox">' +
+						'<input type="checkbox" value="' + label + '" id="' + id + '" ' + ( selected ? 'checked' : '' ) + ' />' +
+						'<span class="forminator-checkbox-box" aria-hidden="true"></span>' +
+						'<span>' + label + '</span>' +
+					'</label>' ;
+
+		return markup;
+	};
+
 	FUI.select2 = function() {
 
 		$( '.forminator-custom-form' ).each( function() {
@@ -29,8 +62,9 @@
 
 				var $dir,
 					$language = 'en',
-					$placeholder = 'Search',
-					$hasSearch = -1
+					$placeholder = 'Select',
+					$hasSearch = -1,
+					$hasCheckbox = false
 					;
 
 				if ( $element.hasClass( 'forminator-design--' + $theme ) && $select.length ) {
@@ -39,21 +73,22 @@
 
 						var $select = $( this ),
 							$dialog = $select.closest( '.sui-dialog-content' ),
-							$parent = $dialog.length ? $dialog : $select.closest( '.elementor-popup-modal' );
+							$parent = $dialog.length ? $dialog : $select.closest( '.elementor-popup-modal' ),
+							$dropdownClass = 'forminator-custom-form-' + $formid + ' forminator-dropdown--' + $theme;
 
 						if ( true === $select.data( 'rtl-support' ) ) {
 							$dir = 'rtl';
 						} else {
 							$dir = 'ltr';
 						}
 
-						if ( '' !== $select.data( 'placeholder' ) ) {
+						if ( $select.data( 'placeholder' ) ) {
 							$placeholder = $select.data( 'placeholder' );
 						} else {
-							$placeholder = 'Search';
+							$placeholder = 'Select';
 						}
 
-						if ( '' !== $select.data( 'language' ) ) {
+						if ( $select.data( 'language' ) ) {
 							$language = $select.data( 'language' );
 						} else {
 							$language = 'en';
@@ -65,6 +100,17 @@
 							$hasSearch = -1;
 						}
 
+						if ( true === $select.data( 'checkbox' ) ) {
+							$hasCheckbox = true;
+							$dropdownClass += ' forminator-dropdown--checkbox';
+						} else {
+							$hasCheckbox = false;
+						}
+
+						if ( $select.prop( 'multiple' ) ) {
+							$dropdownClass += ' forminator-dropdown--multiple';
+						}
+
 						if ( ! $parent.length ) {
 							$parent = $( document.body );
 						}
@@ -73,11 +119,23 @@
 							dir: $dir,
 							language: $language,
 							placeholder: $placeholder,
-							dropdownCssClass: 'forminator-custom-form-' + $formid + ' forminator-dropdown--' + $theme,
+							dropdownCssClass: $dropdownClass,
 							minimumResultsForSearch: $hasSearch,
-							dropdownParent: $parent
+							dropdownParent: $parent,
+							...( $hasCheckbox && {
+								closeOnSelect: false,
+								templateResult: FUI.select.formatCheckbox,
+								escapeMarkup: function( markup ) {
+									return markup;
+								}
+							})
 						}).on( 'select2:opening', function() {
-							$select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', '' !== $select.data( 'placeholder' ) ? $select.data( 'placeholder' ) : 'Search' );
+							if ( $select.data( 'search-placeholder' ) ) {
+								$select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', $select.data( 'search-placeholder' ) );
+							} else {
+								$select.data( 'select2' ).$dropdown.find( ':input.select2-search__field' ).prop( 'placeholder', $select.data( 'placeholder' ) ? $select.data( 'placeholder' ) : 'Search' );
+							}
+
 							if ( $select.closest( '.hustle-popup' ).length || $select.closest( '.hustle-slidein' ) ) {
 								$( document.body ).addClass( 'forminator-hustle-dropdown-fix' );
 							}