Select2 auto closes on click in WooCommerce as variation custom field - woocommerce

Question

I am trying to use Select2 4.0 in the product admin of WooCommerce 3.1.0.
I have added a custom field to variations called Color Groups, like so:
add_action( 'woocommerce_variation_options', 'add_to_variations_metabox', 10, 3 );
function add_to_variations_metabox( $loop, $variation_data, $variation ) {
<div>
<p class="form-row">
<label for="dipi_color_groups<?php echo $loop; ?>"><?php echo __( 'Color Groups', 'dipi' ); ?></label>
<select multiple="true" id="dipi_color_groups<?php echo $loop; ?>" class="color_groups" name="dipi_color_groups[<?php echo $loop; ?>]">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Beige</option>
</select>
</p>
</div> <?php
}
Here is my JS that makes the select a Select2.
$( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation', function( e ) {
$( "select.color_groups", $( this ) ).select2({
tags: true,
placeholder: "Add color groups...",
width: "100%",
createTag: function ( params ) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});
});
The field displays just fine.
But when I click on it the Select2 automatically unfocuses / closes. I think it's a collision with WooCommerce's handling of Select2's, but I can't figure out how to duplicate their functionality within WC edit product.
What's the deal? Any help greatly appreciated!

Answer 1

I figured it out. The problem was with my click event attached to any single variations wrapping container. When clicking on the Select2 the .woocommerce_variation click event would fire and reset the Select2—automatically losing focus.
So I scoped the click event to the variation heading title, the <h3>, and only when closed. Also, I check to see if the Select2 has already been applied to avoid wasted resources or resetting the element.
$( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation.closed h3', function( e ) {
// get current ddl
$ddl = $( "select.color_groups", $( this ).parent() );
// already a select2?
if ( $ddl.hasClass("select2-hidden-accessible" ) ) return; // get out...
// select2-ify dropdown
$ddl.select2({
tags: true,
placeholder: "Add color groups...",
width: "100%",
createTag: function ( params ) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});
});