# Exception occurs when double-clicking after adding FreeTextAnnotation

**URL:** <https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277>\
**Category:** Technical Support\
**Created:** [September 20, 2020, 5:42pm UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277 "2020-09-20T17:42:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![eul.noh](https://avatars.discourse-cdn.com/v4/letter/e/7bcc69/32.png) [@eul.noh](https://pdfjs.community/u/eul.noh)\
**Post date:** [September 20, 2020, 5:42pm UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/1 "2020-09-20T17:42:12Z")

</div>

**Detailed description of issue**  
After adding FreeTextAnnotation, an error occurs when double-clicking for editing.

**Expected behaviour**  
the modification is complete and I can export and import Annotation.

**Code snippet**  
newAnnot = new Annotations.FreeTextAnnotation();  
newAnnot.Width = AnnotationStyle[type].width;  
newAnnot.Height = AnnotationStyle[type].height;  
newAnnot.X = position.x;  
newAnnot.Y = position.y;  
newAnnot.FontSize = fontSize;  
newAnnot.TextColor = new Annotations.Color(0, 0, 0);  
newAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));  
newAnnot.StrokeThickness = 0;  
newAnnot.setContents(‘Text’);

**Error**  
CoreControls.js:187 TypeError: Cannot read property ‘getBoundingClientRect’ of null  
at webviewer-ui.min.js:52  
at e (webviewer-ui.min.js:52)  
at CoreControls.js:458  
at Array.forEach ()  
at e.x.trigger (CoreControls.js:458)  
at y. (CoreControls.js:980)  
at CoreControls.js:458  
at Array.forEach ()  
at y.x.trigger (CoreControls.js:458)  
at HTMLDivElement. (CoreControls.js:886)

**verison**  
commit 9a9f5903f594755b5356e3e5897f84254b2baa5b (tag: v6.3)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 22, 2020, 2:35pm UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/2 "2020-09-22T14:35:41Z")

</div>

Hey there!

I cannot reproduce your issue in either version 6.3 or 7.0.1.

Do you have any other code that customizes the FreeTextAnnotation class? Can you share the code that adds the annotation to the annotation manager? Any other relevant code around this annotation would be helpful.

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![eul.noh](https://avatars.discourse-cdn.com/v4/letter/e/7bcc69/32.png) [@eul.noh](https://pdfjs.community/u/eul.noh)\
**Post date:** [September 23, 2020, 3:21am UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/3 "2020-09-23T03:21:47Z")

</div>

[webviewer.zip](https://pdfjs.community/uploads/short-url/dY6UINSZvKJSayTRu05pXMdWnqk.zip) (2.5 MB)

I have attached the webviewer I am using. I’m using typescript.

**Code**

```javascript
 useEffect(() => {
    WebViewer(
      {
        path: '../../../../content/webviewer/lib',
        initialDoc: docUrl,
        disabledElements: [
          'annotationStyleEditButton',
          'textToolGroupButton',
          'annotationStylePopup',
          'richTextPopup',
          'textPopup',
          'toolsButton',
          'menuButton',
          'contextMenuPopup',
          'freeHandToolGroupButton',
          'textToolGroupButton',
          'shapeToolGroupButton',
          'signatureToolButton',
          'eraserToolButton',
          'stickyToolButton',
          'freeTextToolButton',
          'miscToolGroupButton',
          'signatureModal',
          'signatureOverlay',
          'richTextUnderlineButton',
          'richTextItalicButton',
          'richTextColorPalette',
        ]
      },
        viewer.current,
    ).then((instance) => {
      const { docViewer, annotManager, Annotations} = instance;

      instance.disableTools();

      docViewer.on('documentLoaded', () => {

        const newAnnot = new Annotations.FreeTextAnnotation();
        newAnnot.Width = 100;
        newAnnot.Height = 30;
        newAnnot.X = 10;
        newAnnot.Y = 10;
        newAnnot.FontSize = '20pt';
        newAnnot.TextColor = new Annotations.Color(0, 0, 0);
        newAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));
        newAnnot.StrokeThickness = 0;
        newAnnot.setContents('text');
        annotManager.addAnnotation(textAnnot, true);
        annotManager.redrawAnnotation(textAnnot);
      });
...
}

```

---

<div class="post-metadata">

**Author:** ![eul.noh](https://avatars.discourse-cdn.com/v4/letter/e/7bcc69/32.png) [@eul.noh](https://pdfjs.community/u/eul.noh)\
**Post date:** [September 23, 2020, 6:40am UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/4 "2020-09-23T06:40:51Z")

</div>

**Detailed description of issue**  
After edting, export annotation and I get this xfdf string  
[xfdf\_annotation.zip](https://pdfjs.community/uploads/short-url/hluQnI0OHUFz3NI1jSZiP1Hfajf.zip) (838 Bytes)

**An error occurs when importing. And importing all annotations fail…**

**Expected behaviour**  
I hope that the freetext annotation can be properly modified and exported.  
I would like to see the modified contents when importing.

**Error**  
CoreControls.js:789 Uncaught TypeError: Cannot read property ‘AU’ of undefined  
at **webpack\_exports**.e.Rv (VM451 CoreControls.js:789)  
at **webpack\_exports**.e.Rk (VM451 CoreControls.js:790)  
at ba.Rk (VM451 CoreControls.js:217)  
at ba.Rk (VM451 CoreControls.js:331)  
at ba.DX (VM451 CoreControls.js:324)  
at ba.Pd (VM451 CoreControls.js:323)  
at n.f.Nk (VM451 CoreControls.js:293)  
at VM451 CoreControls.js:242  
at Array.forEach ()  
at VM451 CoreControls.js:242

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 23, 2020, 7:22pm UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/5 "2020-09-23T19:22:36Z")

</div>

Hi!

I still cannot reproduce the double clicking issue. I do notice a few potential issues in your code though.

1. You are creating an annotation named `newAnnot` but then importing an annotation called `textAnnot` into annotation manager (which does not exist)

2. You are not passing a dependency array to `useEffect` which means you may be mounting WebViewer multiple times, which will cause issues.

Also, I’m a bit confused about your last message. Is this a new error that is occurring?

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![blocko\_developers](https://avatars.discourse-cdn.com/v4/letter/b/e9bcb4/32.png) [@blocko\_developers](https://pdfjs.community/u/blocko_developers)\
**Post date:** [September 24, 2020, 3:03am UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/6 "2020-09-24T03:03:48Z")

</div>

Sorry for making you confused. I will open it to another issue.  
I put a sample that reproduced there on github.

> [@Import fails after editing freetext annotation](https://pdfjs.community/t/import-fails-after-editing-freetext-annotation/289):
>
> Test Setup I created an simple environment to reproduce the problem. $ git clone [https://github.com/nolnol2/pdfjs-express-react-sample](https://github.com/nolnol2/pdfjs-express-react-sample) $ git checkout origin/freetext\_issue -b freetext\_issue npm start Test scenario This sample is exported when mouseRightDown and imported when dblClick. Modify the contents of FreetextAnnoation. Export. import An error occurred. If you do not modify the contents of FreetextAnnoation, no error occurs. Detailed description of issue After edting, export ann…

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 24, 2020, 3:50pm UTC](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/7 "2020-09-24T15:50:30Z")

</div>