title: Yii2 Kartik Gridview + Select2 filter
body: <p>I have a Yii2 app and on one of my index views (modified version of the default crud generated with <code>gii</code> cli tool) I've replaced the <code>GridView</code> widget with the Kartik one, and likewise set a column to use the <code>filterType</code> of <code>GridView::FILTER_SELECT2</code></p>
  
  <p>My issue is that when passing an array to the column without the <code>filterType</code> I get a select menu, with a blank option to "clear" the search filter:</p>
  
  <pre><code>[
      'attribute' =&gt; 'scale_id',
      'label' =&gt; 'Scale',
      'value' =&gt; function($model) {
          return empty($model-&gt;scale) ? null : $model-&gt;scale-&gt;name;
      },
      'filter' =&gt; ArrayHelper::map(Scale::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
  ],
  </code></pre>
  
  <p>However, by changing the filter to Kartik's select2 one that empty option doesn't appear and the same behavior doesn't apply:</p>
  
  <pre><code>[
      'attribute' =&gt; 'scale_id',
      'label' =&gt; 'Scale',
      'value' =&gt; function($model) {
          return empty($model-&gt;scale) ? null : $model-&gt;scale-&gt;name;
      },
      'filter' =&gt; ArrayHelper::map(Scale::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
      'filterType' =&gt; GridView::FILTER_SELECT2,
  ],
  </code></pre>
  
  <p>How would I achieve the same "blank unless changed" select filters with Kartik's select2 filter?</p>
  
  <p><strong>Update:</strong>
  Combining <code>prompt</code> with <code>allowClear</code> recreates similar functionality, but it's still not ideal. The initial display looks like this:
  <a href="https://i.stack.imgur.com/en81T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/en81T.png" alt="Initial View"></a>
  However, once options have been selected, the close <code>x</code> doesn't fit right and overlays the text, as well as not providing the original behavior of having a blank/null value in the dropdown:
  <a href="https://i.stack.imgur.com/Hvvfv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hvvfv.png" alt="Options Selected"></a></p>
  
  <p>Here is my code for the <code>GridView</code></p>
  
  <pre><code>&lt;?= GridView::widget([
      'dataProvider' =&gt; $dataProvider,
      'filterModel' =&gt; $searchModel,
      'columns' =&gt; [
  
          'id',
          'description',
          'sku_number',
          [
              'attribute' =&gt; 'owner_id',
              'label' =&gt; 'Owner',
              'value' =&gt; function($model) {
                  return $model-&gt;owner-&gt;name;
              },
              'filter' =&gt; ArrayHelper::map(Owner::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
              'filterType' =&gt; GridView::FILTER_SELECT2,
              'filterWidgetOptions' =&gt; [
                  'options' =&gt; ['prompt' =&gt; ''],
                  'pluginOptions' =&gt; ['allowClear' =&gt; true],
              ],
          ],
          [
              'attribute' =&gt; 'product_id',
              'label' =&gt; 'Product',
              'value' =&gt; function($model) {
                  return $model-&gt;product-&gt;name;
              },
              'filter' =&gt; ArrayHelper::map(Product::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
              'filterType' =&gt; GridView::FILTER_SELECT2,
              'filterWidgetOptions' =&gt; [
                  'options' =&gt; ['prompt' =&gt; ''],
                  'pluginOptions' =&gt; ['allowClear' =&gt; true],
              ],
          ],
          [
              'attribute' =&gt; 'manufacturer_id',
              'label' =&gt; 'Manufacturer',
              'value' =&gt; function($model) {
                  return $model-&gt;manufacturer-&gt;name;
              },
              'filter' =&gt; ArrayHelper::map(Manufacturer::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
              'filterType' =&gt; GridView::FILTER_SELECT2,
              'filterWidgetOptions' =&gt; [
                  'options' =&gt; ['prompt' =&gt; ''],
                  'pluginOptions' =&gt; ['allowClear' =&gt; true],
              ],
          ],
          [
              'attribute' =&gt; 'scale_id',
              'label' =&gt; 'Scale',
              'value' =&gt; function($model) {
                  return empty($model-&gt;scale) ? null : $model-&gt;scale-&gt;name;
              },
              'filter' =&gt; ArrayHelper::map(Scale::find()-&gt;asArray()-&gt;all(), 'id', 'name'),
              'filterType' =&gt; GridView::FILTER_SELECT2,
              'filterWidgetOptions' =&gt; [
                  'options' =&gt; ['prompt' =&gt; ''],
                  'pluginOptions' =&gt; ['allowClear' =&gt; true],
              ],
          ],
  
          ['class' =&gt; 'yii\grid\ActionColumn'],
      ],
  ]); ?&gt;
  </code></pre>