Backrop no hide when modal.hide().

[terabytesoftw]

First of all thank you very much excellent library, everything works well for me except that the backdrop when the modal is hidden is not removed, which would be the best way to approach it thanks.

I am using a pure php table generator, and i want to modify some data from the modify button, it works perfect just fails there.

var editButton = document.querySelector('a[data-modal-toggle="modal-update"]');

editButton.addEventListener('click', function(event) {
  event.preventDefault();

  var usernameCell = event.target.closest('tr').querySelector('td[data-username]');
  var emailCell = event.target.closest('tr').querySelector('td[data-email]');

  var username = usernameCell.textContent.trim();
  var email = emailCell.textContent.trim();

  var modal = new Modal(document.querySelector('#modal-update'), {
    backdrop: 'static',
    closable: true,
    onHide: () => {
    }
  });

  var usernameInput = document.querySelector('#updatebyadminformmodel-username');
  var emailInput = document.querySelector('#updatebyadminformmodel-email');

  usernameInput.value = username;
  emailInput.value = email;

  var submitButton = document.querySelector('#modal-update button[type="submit"]');
  submitButton.addEventListener('click', function(event) {
    event.preventDefault();

    var csrfToken = document.querySelector('meta[name="csrf-token"]');
    var csrfTokenValue = csrfToken ? csrfToken.getAttribute('content') : null;

    var updatedUsername = usernameInput.value;
    var updatedEmail = emailInput.value;

    fetch('admin/update', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRF-Token': csrfTokenValue
      },
      body: new URLSearchParams({
        username: updatedUsername,
        email: updatedEmail
      })
    })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        } else {
          console.log(response);
          throw new Error('Bad request');
        }
      })
      .then(function(data) {
        if (data.success) {
          modal.hide();
        } else {
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  });
});

<?php

declare(strict_types=1);

namespace Yii\User\UseCase\UpdateByAdmin;

use Psr\Http\Message\ResponseInterface;
use Yii\User\UseCase\AbstractAction;
use Yiisoft\DataResponse\DataResponseFactoryInterface;

final class UpdateByAdminAction extends AbstractAction
{
    public function index(DataResponseFactoryInterface $dataResponseFactory): ResponseInterface
    {
        return $dataResponseFactory->createResponse(['success' => true]);
    }
}

If you have any ideas, i’ll be grateful,

Thank you.

[aris-2]

Hello, I am struggling with the same problem, did you manage to find a solution?

I have noticed that outside of addEventListener the Backrop is successfully hidden

[0Chan-smc]

If you use 'data-modal-toggle' with hide() method, there is a backdrop bug,
you can check more details from this issue #963 .