Editor Error for Select Field Type when using LWC (Locker compliance issue?)

dev@zincpartners.us

I ran into a somewhat obscure error while initializing a select field in the DataTables Editor within a Salesforce Lightning Web Component (LWC). I figured I’d post about it in case it helps others or if this is worth flagging as a compatibility concern.

The Editor was throwing an "Illegal invocation" error during select's _addOptions, specifically on this line:

o.length = 0;

It seems the options collection retrieved from the Editor's internal _input reference was a proxy object rather than a true HTMLOptionsCollection. I'm working within LWC, which enforces strict Locker Service constraints. In this context, directly modifying options.length appears to violate the sandboxing rules. I resolved this by replacing:

var o = t._input[0].options;
o.length = 0;

with:

var q = t._input[0];
var o = q.options;
q.innerHTML = '';

and:

This avoids directly assigning to .length, instead clearing the element’s contents in a Locker-compliant way. I also replaced o[i+s] = e with q.appendChild(e) to make the insertion work cleanly in the DOM.

Modified Snippet:

_addOptions: function (t, e, i) {
var n, q = t._input[0], o = q.options, s = 0;

i = (i === undefined ? false : i);
if (i) {
    s = o.length;
} else {
    q.innerHTML = '';
}

if (t.placeholder !== undefined) {
    i = t.placeholderValue !== undefined ? t.placeholderValue : '';
    s++;
    o[0] = new Option(t.placeholder, i);
    n = t.placeholderDisabled === undefined || t.placeholderDisabled;
    o[0].hidden = n;
    o[0].disabled = n;
    o[0]._editor_val = i;
}

if (e) {
    P.pairs(e, t.optionsPair, function (t, e, i, n) {
        var opt = new Option(e, t);
        opt._editor_val = t;
        if (n) w(opt).attr(n);
        q.appendChild(opt);
    });
}

}

Is this an acceptable workaround, or could these changes cause other issues?

Has anyone else encountered similar DOM manipulation issues when using Datatables/Editor in web component frameworks? Or is this exclusive to LWC?

allan

t._input[0].options;

In this context t._input[0] is an HTML Select element which has an options property that is an HTMLOptionsCollection.

That in turn has a length property which can be set - and in this case I use it as a shorthand to empty out the options.

From what you are saying, LWC is replacing the options parameter with a proxy object. Is that right? Are you able to link to the page showing the issue so I can inspect the object?

Thanks,
Allan

dev@zincpartners.us

Yes, I think LWC wraps objects in proxy objects and locks access to the shadow DOM. It's tricky to share an example with needing to log in to Salesforce's sandboxes. I can see about mocking up an example that I can share publicly, or I could also privately share the log in credentials to look at the actual example.

Thanks Allan

allan

If it is replacing DOM components that Editor is assuming will be there, then there is a good chance that this won't be the only issue. It kind of feels like all bets are off in such a case!

Does it accept t._input[0].options.splice(0, t._input[0].length);? I could countenance that a bit more. Its the same thing, just longer.

Allan