Yii2: Как настроить модал начальной загрузки для работы с escape-ключом и Select2?

Question

У меня есть виджет Yii2 Modal, и мне нужно закрыть модал при нажатии клавиши ESC.

<?= Modal::widget([
    'id' => 'modal_view',
    'options' => [
        'tabindex' => false, // important for Select2 to work properly
    ]
]) ?>

Я нашел Параметры мод начальной загрузки и clientOptions но это не сработало:

FALSE but it doesn't work">

<?= Modal::widget([
    'id' => 'modal_view',
    'size' => 'modal-lg',
    'options' => [
        'tabindex' => false, // important for Select2 to work properly
    ],
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => true]
]) ?>

Answer 1

Для правильной работы клавиши ESC необходимо установить tabindex="-1" для модального бутстрапа.

Не знаю, назначаете ли вы его false для выбора select2 из-за проблем с компоновкой? потому что для меня это работает правильно с -1. Посмотреть изображение

Поэтому измените свой код на

<?= Modal::widget([
    'id' => 'modal_view',
    'size' => 'modal-lg',
    'options' => [
        'tabindex' => "-1", 
    ],
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => true]
]) ?>

Вы можете увидеть это обсуждение для деталей.

EDIT

Проблема, с которой вы столкнулись, связана с focus. Bootstrap регистрирует слушателя события focusin, которое проверяет, является ли сфокусированный элемент либо самим оверлеем, либо потомком его. Вы можете исправить это, переписав функцию enforceFocus, которая регистрирует событие в модальном режиме.

Добавьте следующую строку javascript в ваше представление

Bootstrap 3

$js=<<<JS
    $.fn.modal.Constructor.prototype.enforceFocus = function() {};
JS;
$this->registerJs($js, View::POS_READY);

Bootstrap 4

$js=<<<JS
    $.fn.modal.Constructor.prototype._enforceFocus = function() {};
JS;
$this->registerJs($js, View::POS_READY);