Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closing modal keeps backdrop #963

Open
alec-jensen opened this issue Sep 16, 2024 · 4 comments
Open

Closing modal keeps backdrop #963

alec-jensen opened this issue Sep 16, 2024 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@alec-jensen
Copy link

Describe the bug
When I close a modal using javascript, the backdrop remains.

To Reproduce
Steps to reproduce the behavior:

  1. Close a modal using javascript

Expected behavior
The modal should completely close.

Screenshots
image
image

Desktop (please complete the following information):

  • OS: Fedora 40
  • Chrome
  • 128.0.6613.137

Additional context
Here's my code: https://gist.github.com/alec-jensen/80a7b28aa8302cb36fa1a2a62a581eee

@zoltanszogyenyi
Copy link
Member

Hey @alec-jensen,

Are you sure this is the only instance of the modal?

Check window.FlowbiteInstances.

@zoltanszogyenyi
Copy link
Member

Reminder for myself: need to check instance creation for modals

@zoltanszogyenyi zoltanszogyenyi self-assigned this Sep 17, 2024
@zoltanszogyenyi zoltanszogyenyi added the bug Something isn't working label Sep 17, 2024
@sammiehsieh
Copy link

I'm not sure if this will help, I had a similar situation this afternoon.

After trying for several hours, I found out it was because I was using data-modal-toggle mixed with modal.hide().

Therefore I removed data-modal-toggle and used modal.show(), and it worked 🎊 , the backdrop disappeared automatically.




Here are my code (I am using Angular 18 & TypeScript):

<!-- Parent template -->
<button type="button" data-modal-target="visit-edit-modal" (click)="showModal()">Open Modal</button>
<app-visit-edit-modal [app]="app" (appChange)="updateApp($event)" (modalEvent)="onModalReceived($event)"></app-visit-edit-modal>
// Parent component
// ...
  modalInstance!: Modal;

  onModalReceived(e: any): void {
    this.modalInstance = e;
  }

  showModal(): void {
    if (this.modalInstance) {
      this.modalInstance.show();
    }
  }

  updateApp(e: any) {
    console.log('updated data', e)
  }
// ...
<!-- app-visit-edit-modal template -->
<app-modal [modalName]="'visit-edit-modal'" [modalHeader]="'入館申請修改'" (modalEvent)="onModalReceived($event)">
    <form>
        <!-- Labels and inputs ... -->
        <div class="flex justify-end mt-2">
          <button type="button" (click)="submitForm()">Confirm</button>
        </div>
    </form>
</app-modal>
// app-visit-edit-modal component
// ...
  @Input({ required: true }) app!: Application;
  @Output() appChange = new EventEmitter<any>();

  modal!: Modal;
  @Output() modalEvent = new EventEmitter<Modal>();

  onModalReceived(modal: Modal) {
    this.modal = modal;
    this.modalEvent.emit(this.modal);
  }

  submitForm(): void {
    this.appChange.emit(this.fg.value);
    this.modal.hide();
  }
// ...
<!-- modal template -->
<div [id]="modalName()" tabindex="-1" aria-hidden="true" #myModal
  class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full {{size()}} max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{modalHeader()}}</h3>
                <button type="button" [attr.data-modal-hide]="modalName()"
                  class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 max-h-[calc(100vh-8rem)] overflow-y-auto">
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>
// modal component
// ...
  @ViewChild('myModal') myModal!: ElementRef<HTMLElement>;
  modal!: Modal;
  modalOptions: ModalOptions = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: true,
    onHide: () => {
      console.log('modal is hidden');
    },
    onShow: () => {
      console.log('modal is shown');
    },
    onToggle: () => {
      console.log('modal has been toggled');
    },
  };
  instanceOptions: InstanceOptions = {
    id: 'modalEl',
    override: true
  };

  @Output() modalEvent = new EventEmitter<Modal>();

  ngAfterViewInit(): void {
    if (this.myModal) {
      this.instanceOptions.id = this.modalName();
      this.modal = new Modal(this.myModal.nativeElement, this.modalOptions, this.instanceOptions);
      this.modalEvent.emit(this.modal);
    }
  }
// ...

@0Chan-smc
Copy link

0Chan-smc commented Nov 8, 2024

@sammiehsieh Thank you for sharing the solution.
Removing 'data-modal-toggle' worked for me too. I guess this was the bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants