fix sig keys

.changeset/honest-crews-serve.md

@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+Fixed bug where signatures wouldn't be displayed correctly when more than one signature is on the page

apps/backend/src/index.ts

@@ -10,7 +10,7 @@ import http from 'http';
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '5000');
+var port = normalizePort(process.env.PORT || '8080');
 app.set('port', port);
 
 /**

apps/frontend/src/components/ControlledSignatureCanvas/ControlledSignatureCanvas.tsx

@@ -19,6 +19,7 @@
     useEffect(() => {
         if (!value?.signatureData || !sigCanvas.current || doesCanvasHaveData) return
 
+        sigCanvas?.current?.off()
         const canvas = sigCanvas.current.getCanvas()
         if (!canvas) return
 
@@ -30,7 +31,7 @@
         )
 
         setDoesCanvasHaveData(true)
         setImmediate(() => sigCanvas.current?.fromData(data as any))
     }, [value, sigCanvas.current, doesCanvasHaveData])
 
     /**
@@ -66,5 +67,5 @@
         return formattedData
     }
 
-    return <ReactSignatureCanvas ref={sigCanvas} />
+    return <ReactSignatureCanvas ref={sigCanvas} clearOnResize={false} />
 }

apps/frontend/src/components/Fields/SignatureField.tsx

@@ -87,7 +87,7 @@ const SignatureField = <T extends string>({
             />
             <div className="sig-container">
                 {/* We need to keep changing the key to force a rerender */}
-                <ControlledSignatureCanvas key={hash(value || {})} value={value} />
+                <ControlledSignatureCanvas key={hashSignature(value)} value={value} />
                 <div className="sig-ctl-container">
                     <Button
                         className="sig-ctl-button doc-btn"
@@ -111,4 +111,11 @@ const SignatureField = <T extends string>({
     )
 }
 
+const hashSignature = (sig: Nullish<Signature>): string => {
+    if (!sig)
+        return hash(Math.random())
+
+    return hash(JSON.stringify(sig))
+}
+
 export default SignatureField