Which product are you using?
PDF.js Express Plus
PDF.js Express Version
7.3.9
Detailed description of issue
We have a case where we add Checkbox annotations to the viewer. This has been working in production for some time. We use the prototype as per this guide to add event listeners Customize PDF.js Express From Fields | Documentation.
The strange thing is, on some environments, we are getting this error:
Uncaught (in promise) TypeError: this.Im is not a function
at createInnerElement (CoreControls.js:1484)
at ba.o.mark.o.wrap.m.CheckButtonWidgetAnnotation.createInnerElement (6660.1a6b71e4b7651d09.js:1)
at ba.render (CoreControls.js:1987)
at ba.render (CoreControls.js:438)
at CoreControls.js:342
at new Promise ()
at ba.N_ (CoreControls.js:342)
at CoreControls.js:345
When we log, it seems that the “this” context in the prototype function is not the checkbox as we require, but is referring to the global “this” context:
const createInnerElementCheckButton = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
const checkBoxField = this; //<---- "this" here is not always a checkbox element?
const el = createInnerElementCheckButton.apply(this, arguments);
el.addEventListener('blur', () => {
_this.handleSelectionChange([checkBoxField], "deselected");
setTimeout(() => el.style.outline = `solid 2px ${selectionColour}`);
});
Expected behaviour
“this” should refer to a checkbox
Does your issue happen with every document, or just one?
Seems to be all documents when we are trying to add a checkbox, but strangely on specific environments (All running same version).
Code snippet
Creating the fields
const field = new Annotations.Forms.Field(signature.Id, {
type: 'Btn',
value: signature.Value === "true" ? "On" : "Off",
});
annot = new Annotations.CheckButtonWidgetAnnotation(field, {
appearance: signature.Value === "true" ? "On" : "Off",
appearances: {
Off: {},
On: {},
}
});
annotManager.addAnnotation(annot);
annotManager.redrawAnnotation(annot);
Setting up event listeners
const createInnerElementCheckButton = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
const checkBoxField = this; //<---- "this" here is not always a checkbox element?
const el = createInnerElementCheckButton.apply(this, arguments);
el.addEventListener('blur', () => {
_this.handleSelectionChange([checkBoxField], "deselected");
setTimeout(() => el.style.outline = `solid 2px ${selectionColour}`);
});
el.addEventListener('change', e => {
onInputChange(checkBoxField.fieldName, e.target.checked);
});
return el;
};
