DatePicker doesn't popup inside Headless UI Dialog component

[qhoang-cbs]

Describe the bug
DatePicker Modal doesn't seem to show up inside HeadlessUI Dialog/Modal component

To Reproduce
Steps to reproduce the behavior:

1. Add between component of Headless UI
2. Input field is rendered, but upon clicking on input field, nothing shows up.

[Jasenkoo]

Reference (85) in the old repo.

Please check my comment here

The issue is happening due to autofocus in the Dialog component, causing an internal conflict and setting the focus flag.

To fix it, simply adjust the initialFocus prop on the dialog.

[claide]

Hi, I want to use this date picker but encountered the same issue, I followed the suggestions below but all didn't work:

• teleport
• iinitialFocus

package.json

"@headlessui/vue": "^1.7.9",
"@vuepic/vue-datepicker": "^4.0.0",

Will try to create a codesandbox link for demo.

[Jasenkoo]

@claide Will take a look, v4 introduced some positioning changes.

[claide]

@Jasenkoo , I tried to replicate the issue but it's all working. After digging into what was wrong with my setup, I found out that it was because of the icons I imported from vue-remix-icons. I replaced it with heroicons for now.

Thanks!