All `onclick` events don't work on modals when `DialogOptions.closeByClickingOutside` is being set by true

[vdytynyuk]

Dropdown button seems to be totally inactive when it comes within modal. Here's my code:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown button
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
    </div>
</div>

Has anyone encountered same issue?

[vdytynyuk]

This one is mysterious a bit. I've created new blank project with only one button and modal on it, and dropdowns worked fine on modal. But on my main project same code still doesn't work. Specifically class show is not being applied to dropdown container in order to show menu items. Can this one be some kind of layouts-related issue?

[vdytynyuk]

Hi @bikalay I've found root of this problem and changed title of issue accordingly. The point here is that modal is a child of backdrop element on DOM. And backdrop is being implemented just like that:

closeByClickOutside() {
    const containerEl = this.container.nativeElement;
    containerEl.querySelector('.modal-content').addEventListener('click', (event)=> {
      event.stopPropagation();
    });
    containerEl.addEventListener('click', () => {
        this.dialogService.removeDialog(this.content);
    }, false);
  }
}

So any onclick cannot be propagated when raised from modal dialog. Is there a strong reason why you keep current structure of modal & backdrop elements as parent-child instead of siblings one?

[Sky4CE]

Same issue here, when I set closeByClickingOutside = true, all dropdowns became broken, I use primeng p-dropdown. Very strange behavior, first time click event fires and I can choose a value, but then I'm not able to open dropdown again. Any plans to fix this ?

[mrmedina87]

Is this still happening??

[LasithaPrabodha]

I fixed it by changing the eventlistener to 'mouseup' in dialog-wrapper.component.js. MouseUp event triggers after click.

closeByClickOutside() {
    const containerEl = this.container.nativeElement;
    containerEl.querySelector('.modal-content').addEventListener('mouseup', (event)=> {
      event.stopPropagation();
    });
    containerEl.addEventListener('mouseup', () => {
        this.dialogService.removeDialog(this.content);
    }, false);
  }
}