primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.63k stars 4.63k forks source link

Dynamic Dialog: Prevent scroll to top when child dialog closes in parent dialog #16024

Open singhpawank opened 4 months ago

singhpawank commented 4 months ago

Describe the bug

I have nested dialogs using primeng dialog service, I set focusOnShow false. When I closes dialog B inside dialog A, dialog A's component scrolled to top and first focusable element receives focus. How to prevent it.

private defaultOverlayConfig:DynamicDialogConfig = {
    data:{},
    showHeader:false,
    closable:false,
    height:'100%',
    width:'100%',
    focusOnShow:false,
    focusTrap:false,
    style: { height:'100%', 'max-height':'100%', 'border-radius':'0', 'box-shadow':'none'},
    contentStyle:{height:'100%', padding:'0px', margin:'0px', 'border-radius':'0'},
    maskStyleClass:'overlay-mask-style',
    appendTo:document.getElementById('overlay'),
    transitionOptions: '0ms linear'
   }

Environment

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.7",
    "@angular/core": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@ngx-translate/core": "^15.0.0",
    "primeng": "^17.15.0",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.6",
    "@angular/cli": "^17.3.6",
    "@angular/compiler-cli": "^17.3.0",
    "typescript": "~5.4.2"
  }

Reproducer

No response

Angular version

17.3.0

PrimeNG version

17.15.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.13.0

Browser(s)

Version 126.0.6478.127

Steps to reproduce the behavior

No response

Expected behavior

When dialog B closes I want parent dialog A's scroll position as it was before opening dialog B.

singhpawank commented 4 months ago

I added pButton to first button in the component inside dialog A(parent dialog) and this behavior stopped.

<p-button pButton class="back-button" icon="pi pi-arrow-left" (onClick)="goBack()"/>
jonnomk commented 4 months ago

This isn't a fix though. I don't think the dialog should be trying to automatically give focus to anything on close. I upgraded to PrimeNG version 17.18.6 from version 15. It didn't do this previously.