Close preview button not working

[muramidaza]

The widget works fine. The files are downloaded and displayed. But the Close preview window button does not work. That is, when I click on it, the modal preview window does not close. There are no errors in the console. Im using bootstrap 5

        $fileForm = $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('Прикрепленные файлы');

This button has a click event from yii.js. As I understand it, it will float up to kvFileinputModal. But there is no click event on it, there is a mousedown from bootstrap.js and it seems that it is not intercepted

[kartik-v]

Not sure I can reproduce this. Can you check your console log for any javascript errors? Are you trying to have two bootstrap modals or something (like the fileinput widget inside another modal) which may conflict with the file input preview modal?

[muramidaza]

For some reason, when using AdminLTE, the problem disappeared

[gabordikan]

Hi, I have the same issue. When I click the zoom button, the modal cannot be closed. I created an empty page, only with Yii2 basic header and footer and still does not work. The only error message in console is this:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <button.btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-close>
Ancestor with aria-hidden: <button.btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-close> <button type=​"button" class=​"btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-close" title=​"Részletes előnézet bezárása" data-dismiss=​"modal" aria-hidden=​"true">​…​</button>​

[gabordikan]

Steps to reproduce:

create a docker container with this docker-compose.yml:

services:
  web:
    image: yiisoftware/yii-php:8.3-apache
    restart: always
    ports:
      - 30004:80
    volumes:
      - ./src:/app

Inside the container, run following commands:

cd public
composer require kartik-v/yii2-widget-fileinput "dev-master"
composer require yiisoft/yii2-bootstrap5

Add this line to config/params.php: 'bsVersion' => '5.x',

Add this blokk to views/site/index.php: use kartik\file\FileInput;

and

echo FileInput::widget([
    'name' => 'attachment_3',
]);
?>

If you open the site at localhost:30004/web/, you can test the issue