Dialog not removing injected <style> from <head> when closed via closeButton, causing body overflow to remain hidden #128
Comments
|
Same here |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description:
I'm experiencing an issue with the ngneat/dialog library. When I open a dialog with the option closeButton: true, it injects a <style> element into the of the document that sets body { overflow: hidden; } to prevent background scrolling. It also adds a class to the element.
However, when I close the dialog by clicking on the close button provided by closeButton: true, the class added to the is properly removed, but the <style> element remains in the . This causes the page to remain unscrollable because the overflow: hidden; style is still applied to the through the lingering <style> element.
Note: This issue only occurs when using closeButton: true and closing the dialog via the close button. If I close the dialog using dialogRef.close(), the <style> element is properly removed, and the page scrolls as expected.
Steps to Reproduce:
Open a dialog using ngneat/dialog with the closeButton: true option in an Angular application:
let config: any = { closeButton: true, size: this.#deviceDetectorService.isMobile() ? 'fullScreen' : 'md', windowClass: 'bottom-sheet', minHeight: '15dvh', maxHeight: '100dvh', height: 'auto', enableClose: true, ...data } this.dialog.open(MyComponent, config);Click the close button (×) on the dialog to close it.
Inspect the section of the document and observe that the <style> element containing body
.ngneat-dialog-content{display:flex;flex-direction:column;overflow:hidden;position:relative;animation:dialog-open .4s cubic-bezier(.25,.8,.25,1);border-radius:var(--dialog-content-border-radius, 4px);box-sizing:border-box;box-shadow:var(--dialog-content-box-shadow, 0px 11px 19px rgba(15, 20, 58, .14));background:var(--dialog-content-bg, #fff);width:auto;max-width:100%;height:auto;max-height:100%}@keyframes dialog-open{0%{transform:translate(50px)}to{transform:none}}.ngneat-dialog-content.ngneat-dialog-resizable{resize:both}.ngneat-dialog-backdrop{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;height:100%;width:100%;padding:30px;z-index:var(--dialog-backdrop-z-index, 1050);background-color:transparent;animation:dialog-open-backdrop .3s}.ngneat-dialog-backdrop.ngneat-dialog-backdrop-visible{background:var(--dialog-backdrop-bg, rgba(0, 0, 0, .32))}@keyframes dialog-open-backdrop{0%{opacity:0}to{opacity:1}}.ngneat-drag-marker{position:absolute;left:0;top:0;cursor:move;width:100%;height:10px}.ngneat-close-dialog{display:flex;align-items:center;justify-content:center;position:absolute;cursor:pointer;top:var(--dialog-close-btn-top, 6px);right:var(--dialog-close-btn-right, 10px);width:var(--dialog-close-btn-size, 30px);height:var(--dialog-close-btn-size, 30px);color:var(--dialog-close-btn-color, #5f6368);transition:all .2s ease-in-out;border-radius:50%}.ngneat-close-dialog svg{width:var(--dialog-close-svg-size, 12px);height:var(--dialog-close-svg-size, 12px)}.ngneat-close-dialog:hover{color:var(--dialog-close-btn-color-hover, #5f6368);background-color:var(--dialog-close-btn-bg-hover, #eee)}body{overflow:var(--dialog-overflow, hidden)}is still present.
Inspect the element and observe that any classes added by the dialog are properly removed.
Attempt to scroll the page and notice that scrolling is disabled.
Expected Behavior:
When the dialog is closed by clicking the close button, the injected <style> element in the should be removed, and the overflow property of the should return to its original state, allowing the page to scroll.
Actual Behavior:
The <style> element remains in the after the dialog is closed via the close button, keeping overflow set to hidden on the . This prevents the page from scrolling even after the dialog is closed, despite the class added to the being correctly removed.
Workarounds Tried:
Manually removing the <style> element after the dialog closes.
Updating ngneat/dialog to the latest version.
Closing the dialog programmatically using dialogRef.close() (works correctly but does not involve the close button).
Ensuring that all dialog instances are properly closed.
Environment:
ngneat/dialog version: [5.1.1]
Angular version: [18.2.5]
Browser: [Google Chrome]
Operating System: [Macos]
Additional Information:
This issue seems to be specific to the use of the closeButton: true option and closing the dialog via the close button. When the dialog is closed using other methods (e.g., programmatically or by clicking outside the dialog if enableClose: true), the <style> element is correctly removed, and the page scrolls as expected.
It's important to note that while the dialog properly removes the class it adds to the element upon closing, it does not remove the injected <style> element from the , which continues to enforce overflow: hidden; on the .
Any assistance or guidance on how to resolve this issue would be greatly appreciated.
The text was updated successfully, but these errors were encountered: