❓ Popover dismissed when clicking on SELECT2's elements (button & checkbox)

[enkr1]

I have a column in GridView which is integrated SELECT2 as such:

[
    'format' => "html",
    'attribute' => 'some_attribute',
    'label' => 'X Label',
    'class' => 'kartik\grid\EditableColumn',
    'filter' => ArrayHelper::map(Model::find()->all(), 'id', 'title'),
    'filterType' => GridView::FILTER_SELECT2,
    'filterWidgetOptions' => [
        'options' => ['prompt' => ''],
        'pluginOptions' => [
            'allowClear' => true,
        ],
        'hideSearch' => true,
    ],
    'value' => function ($m) {
        // ...
    },
    'content' => function ($data, $model) {
        // ...
    },
    'editableOptions' => [
        'header' => 'Something',
        'inputType' => kartik\editable\Editable::INPUT_SELECT2,
        'formOptions' => ['action' => ['...']],
        'options' => [
            'data' => ArrayHelper::map(Model::find()->orderBy('title')->all(), 'id', 'title'),
            'options' => ['placeholder' => 'Select a something ...', 'multiple' => true],
        ]
    ],
],
// ...

The issue: The popover will be dismissed whenever (1) ticking the Select all checkbox in the dropdown of SELECT2 field OR (2) removing the selected item in the field by clicking on the x icon.

[ventoh]

I have the same problem. It seems caused by recent update. Tha popover is dismissed also clicking on the search box. So it is impossibile to issuing a search. Moreover something is broken with the z-index in css as the select 2 is displayed under the popover. I have noticed that problem is also on official kartik demo. Please take a look:

[enkr1]

I have the same problem. It seems caused by recent update. Tha popover is dismissed also clicking on the search box. So it is impossibile to issuing a search. Moreover something is broken with the z-index in css as the select 2 is displayed under the popover. I have noticed that problem is also on official kartik demo. Please take a look:

Yes, I noticed the overlay problem and solved it by setting a higher z-index.

[kartik-v]

This requires you to do a configuration of Select2 widget rightly to ensure its embedded properly in a popver (check Select2 demos/docs - where you can set pluginOptions['dropdownParent'] to the popover container identifier.

For editable widget to work properly with popover - the editable demos have been updated.

Note that when using Krajee Select2 widgets inside Editable widget with popovers, you must set the dropdownParent setting within select2Options['pluginOptions'] to a value of <EDITABLE_ID>-popover, where <EDITABLE_ID> is your Editable widget id as set in Editable::options['id']. Cross check the updated Editable popover usage demos to understand this.

[gb5256]

This requires you to do a configuration of Select2 widget rightly to ensure its embedded properly in a popver (check Select2 demos/docs - where you can set pluginOptions['dropdownParent'] to the popover container identifier.

For editable widget to work properly with popover - the editable demos have been updated.

Note that when using Krajee Select2 widgets inside Editable widget with popovers, you must set the dropdownParent setting within select2Options['pluginOptions'] to a value of <EDITABLE_ID>-popover, where <EDITABLE_ID> is your Editable widget id as set in Editable::options['id']. Cross check the updated Editable popover usage demos to understand this.

While this can be the issue, please note that select2options are only available if using DepDrop. The problem with the Select-all button closing the popover is still an ongoing one. But after investigating it myself, it turns out to be an issue with bootstrap-popover-x.js and not with Editable. I have created a new isssue ticket there to follow-up on this issue:

Issue : https://github.com/kartik-v/bootstrap-popover-x/issues/48