Creating a signature and then stamping it on a signature field does not work

WebViewer Version:

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes, https://showcase.apryse.com/
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? Not that I know of
Is your issue related to a front-end framework? Not that I know of
Is your issue related to annotations? Probably?

Please give a brief summary of your issue:
When signing a document, if you click on the signature field first, and then create the signature, everything works. When you click on the “+signature” button in the signatures dropdown at the top, create a signature, and then stamp it on a field, it does not work.

Please describe your issue and provide steps to reproduce it:

  1. go to https://showcase.apryse.com/
  2. go to forms
  3. create a required signature field on the document (I dont know if required is the problem, but it shouldnt be. I’m including it because it might be relevant)
  4. apply the fields
  5. go to fill and sign
  6. click on the signature tool in the toolbar (NOT the signature field)
  7. click on the “+signature and initials” button
  8. create a signature and initials, and then hit create
  9. notice that you now have a signature that follows your mouse cursor
  10. click anywhere in the newly created signature field
  11. notice that the signature has not expanded to fit the field, and the field still says sign here.
  12. notice also that the signatures dropdown has flashed and you now cannot click anywhere on the document without it flashing and doing nothing else. You must click outside the document on the grey area of the editor to close the dropdown and get back to normal.

You also can clear the signature field at this point, and then click the signature in the dropdown, attempt to click on the signature field, and have step 11 happen.

There appears to be code that intends to fix this in signSignatureWidget.js, but I cant make heads or tails of it.

Is there some way to disable the dropdown entirely (and not disable it for other tools, because its a generic container that is used for a bunch of other tools) and just make the user create a new signature for each signature field? Our use case is a very small number of signature fields, usually one per doc.

Barring that is there some sort of workaround for this?

Please provide a link to a minimal sample where the issue is reproducible:

Hello Patrick,

I was able to reproduce this issue with the provided steps. However, is there a reason you are signing this way? Typically, you would click on the sign here element to sign. Clicking on it also allows you to upload an image.

There appears to be code that intends to fix this in signSignatureWidget.js, but I cant make heads or tails of it.

Could you point out the specific code you are referring to?

To clarify, are you referring to disabling this section for only when the signature tool is selected?

We test everything, so if it can be done like that, then we’ve tested it. There is no reason that we need to sign that way, it just appears to be available as an option, so we expect it to work. Personally I prefer clicking on the signature field. It seems to me to be a better way, but since I can click on the dropdown, select a signature, and then get caught in a loop, our users certainly will be able to, and then we will get bug reports.

If there is a way to disable that functionality, I would gladly take it, but since I cant find it I’ve asked here.

in this file: webviewer-ui/src/apis/signSignatureWidget.js at 28a787e6ba84cce7c2bcb0de978d2ecd5bf58e4e · PDFTron/webviewer-ui · GitHub it looks like the code is trying to anticipate every eventuality, though why its doing things the way it is, is a mystery to me.

I would be glad to know of a way to disable the signature dropdown entirely, or at least disable the “stamp mode” that appears after creating a signature, or clicking on an existing one in the dropdown.

You can disable the signature dropdown by modifying the styles in our UI: Customizing-styles | Apryse Documentation

You can disable the signature dropdown entirely with the following CSS.

.selected-signature-row {
    display: none !important;
}

As far as I can tell, all that does is remove the items from inside the dropdown, leaving the blank dropdown there. That is fine, since the dropdown is mostly blank for other tools.

Its still broken though. If you do that, it will work for the first signature, but if you then click on another signature, or clear the signature and click on it again to fill it, the dropdown will open, and the signature that was saved will be visible. I would like it to just show the signature create dialog again in that case.

I’ll see if there are any events that allow me to remove the created signature from the saved signatures after signing.

For anyone wondering how to do this in the future, the solution is as follows:

add this css to the tool, to hide the dropdown when it has the specific rows that denote that you have the signature tool selected:

.ToolsOverlayContainer:has(.selected-signature-row) {
    display: none !important;
}

then do this, to clear the signatures when one is used:

var signatureTool = instance.Core.documentViewer.getTool("AnnotationCreateSignature");

signatureTool.addEventListener("annotationAdded", function () {
    for (var i = 0; i < signatureTool.getSavedSignatures().length; i++) {
        signatureTool.deleteSavedSignature(i);
    }
});