Skip to content

fix(signature): resolve signature component modified flag always firi… - #650

Open
TanmayGaidhani wants to merge 1 commit into
formio:mainfrom
TanmayGaidhani:fix-signature-modified
Open

fix(signature): resolve signature component modified flag always firi…#650
TanmayGaidhani wants to merge 1 commit into
formio:mainfrom
TanmayGaidhani:fix-signature-modified

Conversation

@TanmayGaidhani

Copy link
Copy Markdown

fix(signature): resolve signature component modified flag always firing with false on user draw

Link to Jira Ticket

https://formio.atlassian.net/browse/FIO-XXXX

Description

What changed?

  • Signature Component Patch: Added a runtime prototype monkey-patch to SignatureComponent.prototype.setValue inside Form.tsx. It temporarily intercepts this.triggerChange on the active component instance. If triggerChange is called without arguments (which standard @formio/js does right after a user strokes the signature pad, causing the debounced event queue to lose the flag), it forwards the original flags payload containing { modified: true }.
  • Form Reconstruction Optimization: Wrapped formReadyCallback inside a React useRef to prevent the <Form /> component from destroying and recreating the underlying Webform instance whenever callback references update across renders.
  • Automated Integration Test: Added Signature.test.tsx containing a test case to simulate signature stroke dispatching and assert that modified becomes true.

Why have you chosen this solution?

  • Modifying the Signature component's prototype directly in the React wrapper allows React developers to get this critical bug fix immediately without needing to wait for a core @formio/js library release or affecting vanilla JS users.
  • The lifecycle refactor prevents performance degradation and visual flickering in applications that pass inline handler functions (e.g., onFormReady={(form) => ...}).

Breaking Changes / Backwards Compatibility

  • None. The change is non-breaking, fully backwards-compatible, and isolated to the signature component's change event propagation flow.

Dependencies

  • None.

How has this PR been tested?

  • Automated Test: Added an integration test suite under src/components/__tests__/Signature.test.tsx that simulates drawing on the signature pad canvas and verifies the change is received with the modified: true flag.
  • Local Run: Executed tests locally via npm test src/components/__tests__/Signature.test.tsx.

Checklist:

  • I have completed the above PR template
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (if applicable)
  • My changes generate no new warnings
  • My changes include tests that prove my fix is effective (or that my feature works as intended)
  • New and existing unit/integration tests pass locally with my changes
  • Any dependent changes have corresponding PRs that are listed above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant