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
Modals dismissed by mouse release when trying to scroll the window #3518
Comments
Hey @penguintheorem , thanks to reach out ! Regarding the issue you report, I am a little bit confused. Modal are designed to actually hide the window scrollbar when opened. I can't even reproduce it on your stackblitz. As soon as modal is opened, I don't have any scrollbar I can grab to scroll around... EDIT: Ok I get it, you have a very narrow screen, which is smaller than the modal height itself! |
@benouat diff --git a/src/modal/modal-window.ts b/src/modal/modal-window.ts
index 3554383..4a06d47 100644
--- a/src/modal/modal-window.ts
+++ b/src/modal/modal-window.ts
@@ -65,13 +65,10 @@ export class NgbModalWindow implements OnInit,
}
}));
- const mouseDowns$ = fromEvent<MouseEvent>(this._elRef.nativeElement, 'mousedown')
- .pipe(
- takeUntil(this.dismissEvent),
- map(e => this.backdrop === true && this._elRef.nativeElement === e.target));
-
- fromEvent<MouseEvent>(this._elRef.nativeElement, 'mouseup')
- .pipe(takeUntil(this.dismissEvent), withLatestFrom(mouseDowns$), filter(([_, shouldClose]) => shouldClose))
+ fromEvent<Event>(this._elRef.nativeElement, 'click')
+ .pipe(
+ filter(e => this.backdrop === true && this._elRef.nativeElement === e.target),
+ takeUntil(this.dismissEvent))
.subscribe(() => this._zone.run(() => this.dismiss(ModalDismissReasons.BACKDROP_CLICK)));
});
} or something along those lines. The problem occurs when the cotnent of the modal upscale the modal body in such way, the scrollbars appears. When scrolled via scrollbars, current mouse-events are triggerred, dismissing the modal. |
Yes this is it So when the modal itself is bigger than the viewport, we do a scrollbar, a legit one, which leads to this bug. when you click it (you mousedown it...) so we think we are outside It's a actual real bug that need a proper fix. |
Using `mousedown` - `mouseup` - `click` combination to handle closing correctly. Fixes #3518
Using `mousedown` - `mouseup` - `click` combination to handle closing correctly. Fixes #3518
Bug description:
When you try to scroll the modal window by clicking and dragging the scrollbar, the modal gets dismissed on mouse release. The following should clarify the issue:
Link to minimally-working StackBlitz that reproduces the issue:
here the example
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 8.2.13
ng-bootstrap: 5.1.4
Bootstrap: 4.3.1
The text was updated successfully, but these errors were encountered: