Annotation Prototype getting wrong "this" in some cases

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;
        };

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hey there!

I cannot reproduce your issue unfortunately. In order for me to be able to help here, I’ll need consistent steps to reproduce.

Just taking a quick look at the codebase, and I don’t really see how this could be possible. We do not mess with the scope or context of this function at all, so my suspicion is that the issue is coming somewhere on your end.

Just a crazy thought, but is your transpiler transforming function(){} to ()=>{} by chance? Something like that would cause the issue you’re seeing. Using the function syntax is required in this use case since you want this to be bound to the annotation.

Logan