Support rendering within popup (window.open-ed) windows

Do you want to request a feature or report a bug? A little bit of both 😅

What is the current behavior?

The signature pad stops working properly if the target it is rendered in is an external window (i.e. a window opened using window.open). Initial click handling and drawing works, but the library is not capable of handling the mouseup event nor clearing the canvas. (clicking to start signing works, but releasing the mouse doesn’t).

e.g.

const canvas = document.createElement('canvas')
const popup = window.open('')
popup.body.appendChild(canvas)
const signaturePad = new SignaturePad(canvas)

This is almost definitely caused by the fact that signature_pad internally uses the global document as an event source for some events (e.g. https://github.com/szimek/signature_pad/blob/77cb9a02c0304fffddf95a7a95606424c68c3286/src/signature_pad.ts#L180), which means that when rendered in an external window, these events never get triggered as the document refers to the parent window.

Repro fiddle: https://jsfiddle.net/mnq4vd0c/6/

What is the expected behavior?

It should allow registering a canvas that is rendered in another document than the parent window.document.

Now, I would be happy to help contribute to writing this feature / bug fix (however you end up categorizing it). For this, I can see two approaches, and would like your opinion on either:

• add an optional getDocument function (or static hostDocument) configuration option to SignaturePad, which would default to window.document (my favoured option)
• use one of the document getters of the passed canvas element, e.g. element.ownerDocument to determine which document to register event listeners for

Please let me know if you have any further questions, and thank you for your time and this great library!

[UziTech]

I think that sounds great. 👍

[vicrep]

So I looked into the spec as well as a little experimentation, and it seems that ownerDocument would indeed work, and doesn’t have the finicky behaviour I had feared – the owner is automatically set to the document it is appended to, regardless of which document initially created the element, which was my biggest concern:

const el = window.document.createElement('canvas')
console.log(el.ownerDocument === window.document) // true
const popup = window.open('')
popup.document.body.appendChild(el)
console.log(el.ownerDocument === popup.document) // true

I think this should work for most use cases, and unless I’m missing something should not have any impact for consumers who render this in the main document. I also still think that there could possibly be future value to a prop instead (so consumers can specify which area/container the library does “click trapping” for), but that could always be a future improvement if needed.

If you’re happy with the above, could I go ahead and propose a PR that swaps window.document for ownerDocument for events?

PS - for selfish reasons, the ownerDocument approach would also make my life easier as I’m using a react wrapper library around this lib, and going for that option would mean I don’t need to propose an update to the wrapper lib as well 😉