# Error during commit event trigger on ListWidgetAnnotation

**URL:** <https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788>\
**Category:** Technical Support\
**Created:** [June 20, 2022, 6:06pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788 "2022-06-20T18:06:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![slavko.jovanovic](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@slavko.jovanovic](https://pdfjs.community/u/slavko.jovanovic)\
**Post date:** [June 20, 2022, 6:06pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/1 "2022-06-20T18:06:51Z")

</div>

**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

```javascript
...} 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

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

```

The event handler is:

```javascript
  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:

```javascript
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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [June 20, 2022, 6:06pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/3 "2022-06-20T18:06:56Z")

</div>

**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](https://pdfjs.express/documentation/annotation/custom-annotations.8#saving-the-custom-annotation)
- [Integrating PDF.js Express Viewer into an existing Blazor project - Integrate PDF.js Express Viewer](https://pdfjs.express/documentation/get-started-viewer/blazor/exist-project#integrate-pdf.js-express-viewer)
- [Best practices for PDF.js Express - Store annotations](https://pdfjs.express/documentation/learn-more/best-practices#store-annotations)

APIs:
- [Core.Annotations.ListWidgetAnnotation - new ListWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.ListWidgetAnnotation.html#ListWidgetAnnotation__anchor)
- [Core.Annotations.DatePickerWidgetAnnotation - new DatePickerWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#DatePickerWidgetAnnotation__anchor)
- [Core.Annotations.SignatureWidgetAnnotation - new SignatureWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.SignatureWidgetAnnotation.html#SignatureWidgetAnnotation__anchor)

Forums:
- [Annotation Prototype getting wrong “this” in some cases](https://pdfjs.community/t/annotation-prototype-getting-wrong-this-in-some-cases/1222/1)
- [Getting error while creating custom annotaion](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/1)
- [Word wrap within textannotation widget](https://pdfjs.community/t/word-wrap-within-textannotation-widget/893/1)

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [June 21, 2022, 9:35pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/4 "2022-06-21T21:35:39Z")

</div>

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.

 ![Pasted Graphic 1](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/83503e63a68a2bcec29c83c14c6ab11829b10cd0.jpeg)

Best Regards,

Kevin Kim  
Web Development Support Engineer  
PDFTron Systems, Inc.  
[www.pdftron.com](http://www.pdftron.com/)

---

<div class="post-metadata">

**Author:** ![slavko.jovanovic](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@slavko.jovanovic](https://pdfjs.community/u/slavko.jovanovic)\
**Post date:** [June 21, 2022, 10:17pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/5 "2022-06-21T22:17:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [June 22, 2022, 4:22pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/6 "2022-06-22T16:22:54Z")

</div>

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](http://www.pdftron.com/)

---

<div class="post-metadata">

**Author:** ![slavko.jovanovic](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@slavko.jovanovic](https://pdfjs.community/u/slavko.jovanovic)\
**Post date:** [June 22, 2022, 7:25pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/7 "2022-06-22T19:25:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [June 23, 2022, 3:03pm UTC](https://pdfjs.community/t/error-during-commit-event-trigger-on-listwidgetannotation/1788/8 "2022-06-23T15:03:57Z")

</div>

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.

 ![Pasted Graphic 3](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/04507b30cc23754a4756a7a9b7d09ef19568a990.jpeg)

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](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](http://www.pdftron.com/)
