When I put my SignaturePad inside of an ant design component library Modal component, it is not able to generate the base64 image.
When the code reaches the trim function in the signaturepad, the signature will be "data:". But if I remove the Modal tags, it will return "data:image/png;base64,iVBORw0KGgoxxxxx...." which is the normal behaviour. Is this due to the signature library not working well in an ant design Modal?
Below is the code:
import { Form, Modal } from 'antd';
const FormComponent = () => {
const [form] = Form.useForm();
return (
<Modal
title="Signature Form"
open={true}>
<div>
<Form
form={form}
>
<div>
<SignaturePad
name="signature"
title="Signature"
setFieldValue={(fieldName, value) => {
formSign.setFieldsValue({ [fieldName]: value });
}}
status={undefined}
skipValidation={false}
/>
</div>
</Form>
</div>
</Modal>
);
);
import React, { useRef, RefObject } from 'react';
import SignaturePad from 'react-signature-canvas';
import { Button, Form } from 'antd';
interface SignaturePadProps {
name: string;
title: string;
setFieldValue: (fieldName: string, value: any) => void;
status?: 'error' | 'success';
skipValidation?: boolean;
}
const SignaturePad: React.FC<SignaturePadProps> = ({
name,
title,
setFieldValue,
status,
skipValidation,
}) => {
const ref: RefObject<SignaturePad> = useRef<SignaturePad>(null);
const isErrorBorder = status === 'error' ? 'signing-error-border' : '';
const trim = () => {
if (ref.current) {
let sign = ref.current.toDataURL('image/png');
setFieldValue(name, sign);
}
};
const clear = () => {
if (ref.current) {
ref.current.clear();
setFieldValue(name, '');
}
};
return (
<Form.Item
{...{
labelCol: {
span: 4,
}
}}
label={title}
name={name}
rules={[{ required: !skipValidation, message: 'This field is required' }]}
valuePropName="data-url"
>
<section className='sign_form'>
<SignaturePad
onEnd={trim}
canvasProps={{
className: `sign_canvas ${isErrorBorder}`,
}}
ref={ref}
/>
<Button onClick={clear} className='clear-btn'>
Clear
</Button>
</section>
</Form.Item>
);
};
export default SignaturePad;
