WooCommerceのSelect2自動クローズがバリエーションカスタムフィールド

Question

WooCommerce 3.1.0の製品管理でSelect2 4.0を使用しようとしています。

私はそうのような色のグループと呼ばれるバリエーションにカスタムフィールドを、追加しました：

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 
} 

はここSelectセレクトの選択を行い、私のJSです。

$('#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 
       } 
      } 
     }); 

    }); 

フィールドがうまく表示されます。

しかし、私はそれをクリックするとSelectセレクトは自動的にunfocuses /閉じます。私はそれがWooCommerceのSelect2の処理と衝突していると思うが、私はWC編集製品内でその機能をどのように複製するかを理解できない。

どのような取引ですか？どのような助けが大いに感謝！

Answer 1

私はそれを理解しました。問題は、単一のバリエーションラッピングコンテナに添付されたクリックイベントで発生しました。 Select2をクリックすると、.woocommerce_variationクリックイベントが発生し、自動的にフォーカスを失うSelect2-をリセットします。

私はバリエーションの見出しタイトル<h3>にクリックイベントをスコープしていました。また、無駄なリソースや要素のリセットを避けるため、Select2が既に適用されているかどうかを確認します。

$('#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 
      } 
     } 
    }); 

});