<template> <p>Before input</p> <input id="xyz" class="abc" placeholder="Please Select..."> <p>After input</p> </template>
don't generate any errors but also don't generate any calendar output.
This message appears in the browser console:
The trial is being authenticated with remote calls made to https://trial.mobiscroll.com. This is strictly necessary for the trial. No remote calls are made from the licensed version. More info on the trial and its limitations: http://help.mobiscroll.com/trials/what-are-the-limitations-of-the-trial
though I don't see such a call being made even with that setup as a "CSP Trusted Site".
lwc:dom="manual" to the
input doesn't help either.
var matchesSelector = element.matchesSelector || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector; return matchesSelector.call(element, selector);
will fail because this
HTMLElementTheGoodPart LWC code https://github.com/salesforce/lwc/blob/master/packages/lwc/types.d.ts#L16 does not implement
matchesSelector. Hence the "Cannot read property 'call' of undefined".
HTMLElementTheGoodPart does implement
querySelectorAll so this polyfill https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill would work.
Trying to add the polyfill to the
LightningElement, not surprisingly given the locked-down security model of LWC, results in this error:
TypeError: Cannot add property matchesSelector, object is not extensible
So it looks like the fix needs to be done in Mobiscroll. But a simple change may not be possible - see Can DOM matches logic be applied to an LWC LightingElement?.