issues in latest Google Chrome 117

[zhil]

After recent Google Chrome update I noticed, that react-signature-canvas is not working correctly any more.

Line is showed as dotted line and auto-removed.

Here is online sandbox https://codesandbox.io/s/react-signature-canvas-example-forked-v2qrkh?file=/src/App.js

Not working in Google Chrome 117.0.5938.132 on Ubuntu

Works just fine in Firefox on the same PC

[agilgur5]

I'm not sure that there's anything we can really do about a Chrome regression, especially in this tiny wrapper

[zhil]

Sorry, I didnt realize, that this library is a wrapper.

I reported issue here https://github.com/szimek/signature_pad/issues/734

[zhil]

@agilgur5 native library author proposed solution, but I cant use it

https://github.com/szimek/signature_pad/issues/734

You can opt in with something like this:

signaturePad.addEventListener("afterUpdateStroke", () => {
  window.resize();
});

I cant find any way to add event listener. I tried to use code like

sigPadRef.current._sigPad.addEventListener("afterUpdateStroke", () => {
            console.log('ACA-512 patch');
            window.resize();
        });

<SignatureCanvas ref={sigPadRef} ..... />

but its not working.

Also I cant find any props like OnAfterUpdateStroke etc. :(

[agilgur5]

Also I cant find any props like OnAfterUpdateStroke etc. :(

Yes that's part of the signature_pad v4 API. react-signature-canvas is still on v2 as v4 had many breaking changes that no contributor has attempted to address yet. See also #68

You can use the onEnd prop/callback which is roughly equivalent to v4's afterUpdateStroke.