Interactions do not work within a shadow DOM
dsappet opened this issue · 3 comments
Describe the bug
When placing the component within a shadow DOM, the calendar month and year controls immediately close the calendar popup. Specifically, the month forward/back buttons as well as selecting a value in the month or year menus cause this unexpected closing.
To Reproduce
Steps to reproduce the behavior:
I've created an example codepen. It creates a very simple web component with shadow dom and places a plain date picker within
- Go to https://codepen.io/geekify/pen/QWKerQG
- Click on the icon to bring up the calendar
- Notice, clicking on a date on the calendar will work, however ...
- Clicking on the forward or back button, or selecting a value in any dropdown closes the calendar popup and does nothing
Expected behavior
The calendar popup should NOT collapse when interacting with month and year controls
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Mac OS
- Browser: Firefox, Safari, Chrome. (Safari - the menus work but not the forward / back)
Additional context
I originally noticed this issue in StencilJS, I narrowed down a few things and found that it was shadow dom related so the sample codepen should be the simplest example.
I think I've found the problem. PR incoming.
This is fixed by #65, please let me know if there is anything I can do to help get this merged. Thank you!
Hello, I ran into this issue as well.
When the duet datepicker is inside the shadow dom of another component, clicking absolutely anywhere on the calendar closes it.
Maybe this issue can be prioritized.