Error during commit event trigger on ListWidgetAnnotation

[slavko.jovanovic]

Which product are you using?

PDF.js Express
PDF.js Express Version

Build:
‘NC8xMi8yMDIyfGI0OTc1YjFjZA==’
Core version:
‘8.4.0’
Full API:
false
UI version:
‘8.4.1’
WebViewer Server:
false

Detailed description of issue
I create a Listbox with

...} else if (annot.getCustomData("type") === "Listbox") {
          if (annot.getCustomData("multiline") === "true") {
            flags.set(instance.Annotations.WidgetFlags.MULTI_SELECT, true);
          } else {
            flags.set(instance.Annotations.WidgetFlags.MULTI_SELECT, false);
          }
          const font = new instance.Annotations.Font({ name: "Helvetica" });
          var qselections = [];
          var options = JSON.parse(annot.getCustomData("options"));
          options.forEach((option) => {
            qselections.push({ value: option });
          });
          field = new instance.Annotations.Forms.Field(annot.Id, {
            type: "Ch",
            options: qselections,
            flags,
            font,
          });
          annotField = new instance.Annotations.ListWidgetAnnotation(field);
          instance.annotManager.addAnnotation(annotField); ...

On the field I add the following

 field.addEventListener("commit", this.fieldChanged)

The event handler is:

  fieldChanged = (value, annot) => {
    var field = annot.getField();
...

There are two issue that I notice:
Issue 1 - when selecting one value in the Listbox the event handler method gets called two times.
Issue 2 - when selecting multiple values in the Listbox I expect to get an array of values. This does not happen and in the debug console I get the following error:

TypeError: z.replace is not a function
    at da.ik.f7 (:2443:111)
    at a.refresh (:527:360)
    at oa.refresh (:1867:101)
    at a.Ci (:527:161)
    at oa.<anonymous> (:517:265)
    at :677:8
    at Array.forEach (<anonymous>)
    at x.trigger (:676:530)
    at HTMLSelectElement.<anonymous> (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:1870:271) {stack: 'TypeError: z.replace is not a function
    at…ewer/lib/core/webviewer-core.min.js:1870:271)', message: 'z.replace is not a function'}

Uncaught Error Error: TypeError: z.replace is not a function
    at ha (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:214:1)
    at <anonymous> (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:677:69)
    at x.trigger (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:676:530)
    at <anonymous> (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:1870:271)
TypeError: z.replace is not a function
    at da.ik.f7 (:2443:111)
    at a.refresh (:527:360)
    at oa.refresh (:1867:101)
    at a.Ci (:527:161)
    at a.Kb (:524:9)
    at :2605:223
    at Array.forEach (<anonymous>)
    at f.ha.qa.Dm (:2597:255)
    at f.ha.qa.SD.GK (:2605:206)
    at f.ha.qa.SD.Kb (http://localhost:3000/webviewer/lib/core/webviewer-core.min.js:2605:120) {stack: 'TypeError: z.replace is not a function
    at…ewer/lib/core/webviewer-core.min.js:2605:120)', message: 'z.replace is not a function'}

Expected behaviour
For Issue 1 - I expect the event handler to be called only once
For Issue 2 - I expect the event handler to return an array of selected values.

Does your issue happen with every document, or just one?
Not specific to any PDF

Link to document
Not specific to any PDF

[system]

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

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

Guides:

• Creating custom annotations for your viewer - Saving the custom annotation
• Integrating PDF.js Express Viewer into an existing Blazor project - Integrate PDF.js Express Viewer
• Best practices for PDF.js Express - Store annotations

APIs:

• Core.Annotations.ListWidgetAnnotation - new ListWidgetAnnotation(field, options)
• Core.Annotations.DatePickerWidgetAnnotation - new DatePickerWidgetAnnotation(field, options)
• Core.Annotations.SignatureWidgetAnnotation - new SignatureWidgetAnnotation(field, options)

Forums:

• Annotation Prototype getting wrong “this” in some cases
• Getting error while creating custom annotaion
• Word wrap within textannotation widget

[kkim]

Hello slavko,

Thank you for contacting us regarding WebViewer and reporting this issue!

I was able to reproduce the issue and am still investigating on the extra event being called.

Regarding issue#2:
‘value’ inside the ‘commit’ event returns an array of selected values.

Best Regards,

Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

[slavko.jovanovic]

Thank-you for looking into this issue. I’m also noticing that the ‘commit’ event is triggering on both user (front end) input and on programmatic setting of value. I was under the impression that ‘commit’ should only triggers from user input and ‘change’ was to trigger for any change to the field.

[kkim]

Hello slavko,

It turns out when ‘commit’ event is triggered, there is also a ‘change’ event that is triggered for each attached WidgetAnnotation.

In this case, the WidgetAnnotation that is attached to the field is ListWidgetAnnotation. So ListWidgetAnnotation fires off the ‘change’ event.

Best Regards,

Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

[slavko.jovanovic]

Thank-you Kevin,
Please let me know if the summary below is correct:

Issue 1 - event hander for ListWidgetAnnotaiton being called 2 times is as designed?, since the WidgetAnnotaton is calling the ‘commit’ event and then the change in the ListWidgetAnnotation is calling the “change” event. Even if I have not added and event listener ‘change’ on the ListWidgetAnnotation? Any suggestions how to either not call the second ‘change’ event or to distinguish between the two events?

Issue 2: Return of an array in values from ListWidgetAnnotation. There is not error, I’m doing something wrong. Would you mind sharing the code on how you are creating the ListWidgetAnnotation as well adding the event listener.

Thank-you

[kkim]

Hello slavko,

List fields are tricky because they are called twice: once when the original selection has changed and once again when the value has changed.

If you use the ‘commit’ event on the text field, there would only be one call as there would be no selection.

You can call the ‘change’ event on the listField any it will trigger once:
https://pdfjs.express/api/Core.Annotations.Forms.Field.html#event:change

As for issue #2, if you know the field’s name, you can call the ‘fieldChanged’ event on the AnnotationManager to get the values:
annotationManager.addEventListener(‘fieldChanged’, (field, value) => {
if (field.name === ‘fieldName’){
console.log(listField Changed: ${field.name} , ${value});
}
});

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com