primefaces
Drawer AppendTo Does not appear to append to container?
Describe the bug
Unless there are extra properties that are needed to be passed into [appendTo]="myCard" then all is well. But it appears this is not the case.
I am trying to open a drawer within a container not to the body. But it appears that appendTo is being ignored and always appending to the body.
Also, aside, in the stackblitz demo, for at least for the basic example, will keep on showing Blocked autofocusing on a <button> element in a cross-origin subframe. in the chrome devtools.
Pull Request Link
No response
Reason for not contributing a PR
- [ ] Lack of time
- [x] Unsure how to implement the fix/feature
- [x] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/wpp8srni
Environment
This is stackblitz opened from https://primeng.org/drawer#basic. Browser is the latest Chrome. Angular v20 Primeng v20
Angular version
20.0.4
PrimeNG version
v20
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
Click on the -> button. The drawer will open attached to the body even though I have am using appendTo to myCard
Expected behavior
It should appendto whatever template id I set. in this case myCard and myCard2.
Hi,
Could you please try it with 21.0.0-beta.1?
Hi @mertsincan , I tried primeng 21.0.0-beta.1. The problem still exists.
My 'test' environment: VSCode, Windows 10, Chrome, Angular 21.0.1, primeng 21.0.0-beta.1. Copied the code from that above stackblitz into my vscode since there is no angular 21 stackblitz option in primeng website.
It appears that the appendto is still not functioning properly.
I tried a stackblitz from the primeng website at v17 and the problem appears to have existing back in v17 v18 and v19 as well. https://stackblitz.com/edit/p8bm4kyp https://stackblitz.com/edit/8wbnmhsj https://stackblitz.com/edit/kepafwea https://stackblitz.com/edit/github-5aqhxhtg-fo3cmxbu
Perhaps there was a breaking change in v16 or earlier?
Or am I simply not using it correctly?
I have <div #myCard> and inside the <p-drawer [appendTo]="myCard" ...> so i can't be the one using it wrong but a broken primeng drawer component?
ApendTo Does Not Work In:
v16.7.1 https://stackblitz.com/edit/uqd2gx-jnmifygu
v15 https://stackblitz.com/edit/angular-j347mf-pvaf1yq6
v14 Cannot find a stackblitz demo that compiling. stackblitz itself errors out when trying to find one online and https://primeng-v14.pages.dev/ just opens v13
v13 https://stackblitz.com/edit/primeng-sidebar-demo-bjqho4fj
Surely I am missing something and that this is not a unique problem since I assume many others are using primeng sidebar/drawer. There's no way no one is using appendto and have no problem?
The only way I was able to get it to 'look' like it is appendTo is manually adding position relative to parent and position absolute to p-drawer mentioned in https://github.com/primefaces/primeng/issues/10364#issuecomment-972893963 from 4 years ago. but this seems like a hack/work around. https://stackblitz.com/edit/wpp8srni-84n8eosd
Outside of the 'hack', the problem persists in all version ( 13, 15, 16, 17, 19, 20, 21beta, 21.0.0-rc.1 in angular20 stackblitz [actually for 21rc1 the click outside in modal=true functionality is also bugged if using regular variables instead of model signal https://stackblitz.com/edit/wpp8srni-ten7y2cz ] )