Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Interactions do not work within a shadow DOM #64

Closed
dsappet opened this issue Jan 27, 2021 · 3 comments · Fixed by #65
Closed

Interactions do not work within a shadow DOM #64

dsappet opened this issue Jan 27, 2021 · 3 comments · Fixed by #65

Comments

@dsappet
Copy link
Contributor

dsappet commented Jan 27, 2021

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

  1. Go to https://codepen.io/geekify/pen/QWKerQG
  2. Click on the icon to bring up the calendar
  3. Notice, clicking on a date on the calendar will work, however ...
  4. 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.

@dsappet
Copy link
Contributor Author

dsappet commented Jan 29, 2021

I think I've found the problem. PR incoming.

@dsappet
Copy link
Contributor Author

dsappet commented Jan 29, 2021

This is fixed by #65, please let me know if there is anything I can do to help get this merged. Thank you!

@acory
Copy link

acory commented Feb 24, 2021

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants