Selectable doesn't work inside a shadow root
guillemcordoba opened this issue · comments
The selectable property in the interaction plugin doesn't work if the calendar is rendered inside a shadow root (e.g. inside of a lit element).
This is because the getElementWithPayload
function here assumes that document.elementsFromPoint(x,y)
will return the elements of the event calendar, but if they are inside a shadow root what's returned is the custom element that contains the shadow root.
I've been able to fix it by replacing that function's implementation with this implementation:
function getElementWithPayload(x, y, root = document) {
for (let el of root.elementsFromPoint(x, y)) {
if (el.shadowRoot) return getElementWithPayload(x, y, el.shadowRoot);
else if (hasPayload(el)) {
return el;
}
}
return null;
}
Which recursively pierces through all shadow roots that it finds.
Thanks for this amazing library!
@guillemcordoba Thank you very much for finding the issue and providing the solution. I will apply it in the next release.
This is now implemented in v1.4.0. Please check.
It works! It's a joy working with open-source libraries that have cool maintainers that respond quickly. Props and many thanks!