Modal closes on button click function inside modal body


Topic: Modal closes on button click function inside modal body

itkaufmann pro premium priority asked 3 years ago

Expected behavior

Just a value change in click function of button in a modal.

Actual behavior

Value changes, but immediately after that the modal closes itself. If I do smth else in the function, like console.log(), this doesn't happen and the modal stays open as expected.

Tested in Google Chrome Version 92.0.4515., Firefox 91.0.2 (64-Bit), Microsoft Edge Version 92.0.902.84

Resources (screenshots, code snippets etc.)

HTML

<div class="modal-body" style="overflow-x: hidden">
  <div *ngIf="showExtraStops">

    <ng-container *ngFor="let stop of order.stops; let i=index">

      <app-address-stop-table class="mb-2 mt-2" [destination]="stop"
                              [title]="'Zwischenziel '+(i+1)"></app-address-stop-table>

      <div class="d-flex justify-content-center align-items-center m-4">
        <i class="fas fa-arrow-right fa-3x"></i>
      </div>

    </ng-container>

  </div>

  <div *ngIf="!showExtraStops" class="d-flex align-items-center">

    <button type="button" class="btn" (click)="toggleShowExtraStops()">
      Zwischenziele anzeigen
    </button>

    <div class="d-flex justify-content-center align-items-center m-4">
      <i class="fas fa-arrow-right fa-3x"></i>
    </div>

  </div>
</div>

TS

  showExtraStops: boolean = false;

  toggleShowExtraStops() {
    this.showExtraStops = !this.showExtraStops;
  }

Arkadiusz Idzikowski staff answered 3 years ago

Thank you for letting us know about this problem, we will take a closer look at that.

As a workaround for now please try to stop event propagation on button click:

<button type="button" class="btn" (click)="toggleShowExtraStops(); $event.stopPropagation()">
  Zwischenziele anzeigen
</button>

itkaufmann pro premium priority commented 3 years ago

Ok thanks for the help!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0
  • Device: any
  • Browser: Google Chrome Version 92.0.4515.
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No