Focus event doesn't work by click on Imperavi wisywyg redactor inside ui-sortable table

Question

I have ui-sortable table and Imperavi redactor inside it. All this based on yii2 framework.

And there is no ability to set cursor focus inside Imperavi redactor. I find out following: if I delete inside <div class="redactor-box"> (showed on screnshot) via chrome debug panel (circled with red color) three events "click", "mouseup" and "mousedown" - focus works correct.

Any ideas, please, how to make focus inside redactor working using JS?

Imperavi redactor taken here: https://github.com/vova07/yii2-imperavi-widget

Sortable taken here: https://github.com/sjaakp/yii2-sortable-behavior

Piece of code inside view:

        <?= SortableGridView::widget([
        'dataProvider' => $dataProvider,
        'orderUrl'     => ['order'],
        'options' => ['class' => 'table'],
        'columns'      => [
            [
                'label' => 'Type',
                'value' => 'template.type.name',
            ],
            [
                'label'  => 'Example',
                'value'  => function ($data) {
                    return \vova07\imperavi\Widget::widget([
                        'name' => 'redactor',
                        'settings' => [
                            'lang' => 'en',
                            'minHeight' => 200,
                            'plugins' => [
                                'clips',
                                'fullscreen',
                            ],
                        ],
                        'value' => $data->value
                    ]);
                },
                'format' => 'raw',
            ],
            [
                'label' => 'Edit',
                'value'  => function ($data) {
                    return '<div class="edit-table-sec"><a href="#"><i
                        class="fa fa-times"></i></a></div>';
                    },
                'format' => 'raw',
            ]

        ],
    ]); ?>

Answer 1

For those having the issue with JQuery UI Sortable, there are 2 ways to prevent it.

1. Disable the dragging on the Redactor input, by adding .redactor_box to the cancel selector of the plugin:

$(list).sortable({
  cancel: 'input,textarea,button,select,option,.redactor_box',
});

2. Only enable the dragging on a specific selector, like a panel heading for instance. You'd use the handle selector of the plugin:

$(list).sortable({
  handle: '.panel-heading',
});