Fix issue with Select2 Dropdown not allowing control to be saved when…

… entries are cleared. Add new clear all option. Add ability to specify placeholder

css/customizer.css

@@ -18,7 +18,7 @@
 	box-shadow: none;
 }
 
-.select2-container--default .selection .select2-selection--multiple {
+.wp-customizer .select2-container--default .selection .select2-selection--multiple {
 	border: none;
 	background: #fcfcff;
 	border-radius: 0;
@@ -28,7 +28,16 @@
 	box-shadow: none;
 }
 
-.select2-container .select2-dropdown {
+.wp-customizer .select2-container--default .select2-selection--multiple .select2-selection__rendered {
+	width: 95%;
+}
+
+.wp-customizer .select2-container--default .select2-selection--multiple .select2-selection__clear {
+	position: absolute;
+	right: 0;
+}
+
+.wp-customizer .select2-container .select2-dropdown {
 	z-index: 900000;
 }
 

inc/custom-controls.php

@@ -388,15 +388,23 @@ class Skyrocket_Dropdown_Select2_Custom_Control extends WP_Customize_Control {
 		 * The type of Select2 Dropwdown to display. Can be either a single select dropdown or a multi-select dropdown. Either false for true. Default = false
 		 */
 		private $multiselect = false;
+		/**
+		 * The Placeholder value to display. Select2 requires a Placeholder value to be set when using the clearall option. Default = 'Please select...'
+		 */
+		private $placeholder = 'Please select...';
 		/**
 		 * Constructor
 		 */
 		public function __construct( $manager, $id, $args = array(), $options = array() ) {
 			parent::__construct( $manager, $id, $args );
-			// Get the font sort order
+			// Check if this is a multi-select field
 			if ( isset( $this->input_attrs['multiselect'] ) && $this->input_attrs['multiselect'] ) {
 				$this->multiselect = true;
 			}
+			// Check if a placeholder string has been specified
+			if ( isset( $this->input_attrs['placeholder'] ) && $this->input_attrs['placeholder'] ) {
+				$this->placeholder = $this->input_attrs['placeholder'];
+			}
 		}
 		/**
 		 * Enqueue our scripts and styles
@@ -411,6 +419,10 @@ public function enqueue() {
 		 * Render the control in the customizer
 		 */
 		public function render_content() {
+			$defaultValue = $this->value();
+			if ( $this->multiselect ) {
+				$defaultValue = explode( ',', $this->value() );
+			}
 		?>
 			<div class="dropdown_select2_control">
 				<?php if( !empty( $this->label ) ) { ?>
@@ -421,18 +433,23 @@ public function render_content() {
 				<?php if( !empty( $this->description ) ) { ?>
 					<span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
 				<?php } ?>
-				<select name="<?php echo $this->id; echo ( $this->multiselect ? '[]' : '' ); ?>" id="<?php echo $this->id; ?>" class="dropdown_select2_select" <?php echo ( $this->multiselect ? 'multiple="multiple" ' : '' ); ?><?php $this->link(); ?>>
+				<input type="hidden" id="<?php echo esc_attr( $this->id ); ?>" class="customize-control-dropdown-select2" value="<?php echo esc_attr( $this->value() ); ?>" name="<?php echo esc_attr( $this->id ); ?>" <?php $this->link(); ?> />
+				<select name="select2-list-<?php echo ( $this->multiselect ? 'multi[]' : 'single' ); ?>" class="customize-control-select2" data-placeholder="<?php echo $this->placeholder; ?>" <?php echo ( $this->multiselect ? 'multiple="multiple" ' : '' ); ?>>
 					<?php
+						if ( !$this->multiselect ) {
+							// When using Select2 for single selection, the Placeholder needs an empty <option> at the top of the list for it to work (multi-selects dont need this)
+							echo '<option></option>';
+						}
 						foreach ( $this->choices as $key => $value ) {
 							if ( is_array( $value ) ) {
 								echo '<optgroup label="' . esc_attr( $key ) . '">';
 								foreach ( $value as $optgroupkey => $optgroupvalue ) {
-									echo '<option value="' . esc_attr( $optgroupkey ) . '" ' . ( in_array( esc_attr( $optgroupkey ), $this->value() ) ? 'selected="selected"' : '' ) . '>' . esc_attr( $optgroupvalue ) . '</option>';
+									echo '<option value="' . esc_attr( $optgroupkey ) . '" ' . ( in_array( esc_attr( $optgroupkey ), $defaultValue ) ? 'selected="selected"' : '' ) . '>' . esc_attr( $optgroupvalue ) . '</option>';
 								}
 								echo '</optgroup>';
 							}
 							else {
-								echo '<option value="' . esc_attr( $key ) . '" ' . selected( esc_attr( $key ), $this->value(), false )  . '>' . esc_attr( $value ) . '</option>';
+								echo '<option value="' . esc_attr( $key ) . '" ' . selected( esc_attr( $key ), $defaultValue, false )  . '>' . esc_attr( $value ) . '</option>';
 							}
 	 					}
 	 				?>

js/customizer.js

@@ -203,7 +203,16 @@ jQuery( document ).ready(function($) {
 	 * @link https://github.com/maddisondesigns
 	 */
 
-	$('.dropdown_select2_select').select2();
+	$('.customize-control-dropdown-select2').each(function(){
+		$('.customize-control-select2').select2({
+			allowClear: true
+		});
+	});
+
+	$(".customize-control-select2").on("change", function() {
+		var select2Val = $(this).val();
+		$(this).parent().find('.customize-control-dropdown-select2').val(select2Val).trigger('change');
+	});
 
 	/**
 	 * Googe Font Select Custom Control