search

duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
https://www.duetds.com
MIT License
1.73k stars 68 forks source link

Interactions do not work within a shadow DOM #64

Closed dsappet closed 3 years ago

dsappet commented 3 years ago

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):

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 commented 3 years ago

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

dsappet commented 3 years ago

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

acory commented 3 years ago

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.