Не работает кнопка закрытия модального окна предпросмотра в Yii2 kartik FileInput. Как исправить?

Question

[Вячеслав]

Я использую виджет FileInput от kartik. Виджет нормально работает. Но не работает кнопка закрытия модального предпросмотра. В консоли никаких ошибок нет. В чем может быть дело?

<?= $form->field($requestFilesForm, 'uploadFiles[]')->widget(FileInput::class, [
            'language' => 'ru',
            'options' => [
                'multiple' => true,
                'accept' => '',
            ],
            'pluginOptions' => [
                'previewFileType' => 'image',
                'deleteUrl' => Url::to(['delete-file'],true),
                'uploadUrl' => $model->id ? Url::to(['upload-files', 'id' => $model->id]) : null,
                'uploadExtraData' => [
                    'id' => $model->id,
                ],
                'overwriteInitial' => false,
                'showPreview' => true,
                'showClose' => false,
                'initialPreview' => $files,
                'initialPreviewFileType' => 'image',
                'initialPreviewAsData' =>true,
                'initialPreviewConfig' => $initialPreviewConfig,
                'pluginEvents' => [
                    "fileuploaded" => "function(event, data, previewId, index) { console.log(data) }",
                ],
                'maxFileSize' => 50000
            ],
        ])->label('Прикрепленные файлы');
?>

Answer 1

[Виктор]

кнопка закрытия модального предпросмотра

- 'showClose' => false,
+ 'showClose' => true,

spoiler

Возможно, ее и вовсе не должно было быть из-за этой настройки, но она добавляется какими-то ассетами.

Если не поможет, надо будет в инспекторе смотреть или в консоли браузера событие клика повесить и проверить поведение. Возможно, кнопке закрытия достаточно будет указать z-index.

Comments

[Вячеслав]

Попробовал - 'showClose' отображает кнопень закрытия панели с загруженными файлами. Обработчик на этой кнопке есть от yii.js он срабатывает но ни чего не делает - возвращает true. То есть, как я понимаю, событие всплывает до kvFileinputModal. В старом проекте я тоже использовал FileInput. Там у kvFileinputModal (это компонент обертка над модальным окном) есть событие onClick - где есть функция закрывающая модалку.

function(event) {
  return _this.hide(event);
}

Но там bootstrap4

В новом проекте используется bootstrap5. У kvFileinputModal нет события onClick. Есть событие onMouseDown и оно не перехватывает события с той кнопки.

И событие там какое то мутное:

function handler(event) {
  hydrateObj(event, {
    delegateTarget: element
  });
  if (handler.oneOff) {
    EventHandler.off(element, event.type, fn);
  }
  return fn.apply(element, [event]);
}

[Виктор]

У kvFileinputModal нет события onClick

зато у DOM элементов есть. Только не "onClick", а "click".

[Вячеслав]

Виктор,

Там

В новом у него то самое событие mousedown, а в старом есть click

[Виктор]

Вячеслав, я понял, что намек не понят.

Решение такое:

1. Создаете js файл для дополнительной обработки модальных окон, или редактируете какой-нибудь существующий
   
2. Добавляете обработчик нажатия по кнопке закрытия (надеюсь, селектор для нее написать сами сможете)

   closeBtn.addEventListener("click", hideModal, false)

   , где closeBtn - DOM-элемент, кнопка закрытия, а hideModal - самописная функция закрытия модального окна (я не знаю что там будет: вызов другого события, изменения классов, или еще что-то)
   
3. Если файл новый, добавляете его к существующим ассетам или создаете новый ассет и регистрируете его в шаблоне
   

[Вячеслав]

Спасибо. Сейчас пытаюсь тоже сделать, но просто так скрыть модалку не получается. Пытаюсь выяснить почему