Skip to content

167: Add instance-scoped IDs to all form inputs #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
lattln wants to merge 3 commits into
base: main
Choose a base branch
from
Open

167: Add instance-scoped IDs to all form inputs #172

lattln wants to merge 3 commits into from

Conversation

@lattln
Copy link
Collaborator

@lattln lattln commented Jan 28, 2026

Summary

Fixes duplicate DOM ID issues when rendering multiple forms with identical schemas on the same page by prefixing all form input IDs with a unique instanceId. This restores correct label associations, accessibility behavior, and browser autofill support.

Key Changes

  • Introduced instance-scoped input IDs using useInstanceId() from @mieweb/forms-engine
  • Updated editor and renderer inputs to use prefixed ID patterns (stable per instance, unique across instances)
  • Removed static ID collisions that broke accessibility and autofill

ID patterns

  • Renderer: ${instanceId}-${fieldType}-${purpose}-${id}
  • Editor: ${instanceId}-editor-${purpose}-${id}

Updated areas

  • Editor inputs: field IDs, options, matrix rows/columns, logic editors, section controls
  • Playground: added explicit static IDs for accessibility
  • Docs: updated ID guidelines in copilot-instructions.md

Testing

  • Rendered multiple identical forms in Playground
  • Verified no duplicate DOM ID warnings
  • Confirmed label associations and browser autofill behavior

lattln added 2 commits January 28, 2026 15:52
@lattln
Initial Implementation & Fixes
9b1a8bb 
- Added Instance ID for store Instances
- Add InstanceID to DOM ID generation for unique DOM ID for all DOM ID collision issues
- Started asdding ID for form fields and slowly adding for all fields to get rid of silent issues
@lattln
finalize form inputs id generation
d1536a9 
+ finalized all html stand issue for ids for all form type input, select, textarea... etc to have unique ids generated based on instanceid + field id + option id + relevant info for id gen per form types
@lattln lattln added P2 Normal Size: M Single component/module or moderate refactor. 3–5 files, limited surface-area change. labels Jan 28, 2026
@lattln lattln linked an issue Jan 28, 2026 that may be closed by this pull request
Fix ID collisions across multiple questionnaire instances** #167
Open
@lattln lattln requested review from avagu-mie and tvenable-mie and removed request for avagu-mie and tvenable-mie January 28, 2026 22:11
@lattln
Copy link
Collaborator Author

lattln commented Jan 28, 2026

removed review -- until 2 other PR is reviewed and QA'ed

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

Reviewers

@abroa01 abroa01 abroa01 approved these changes

@tvenable-mie tvenable-mie Awaiting requested review from tvenable-mie

Assignees

No one assigned

Labels

P2 Normal Size: M Single component/module or moderate refactor. 3–5 files, limited surface-area change.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix ID collisions across multiple questionnaire instances**

3 participants

@lattln @abroa01