Skip to content
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.

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

fix(data-table): prefix internal ID for radio button, checkbox #2082

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

metonym
Copy link
Collaborator

@metonym metonym commented Jan 8, 2025

Fixes #2081

Create an internal ID prefix for the radio buttons and checkboxes used within DataTable.

This addresses the case where multiple DataTable instances may be instantiated, and the data contains overlapping IDs in rows.

Comment on lines 505 to 509
<RadioButton
name="select-row-{row.id}"
name="{id}-{row.id}"
checked={selectedRowIds.includes(row.id)}
on:change={() => {
selectedRowIds = [row.id];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we can, I suggest taking this opportunity to provide a solution that affords progressive enhancement:

  • Have the name attribute be defined by the component consumers; perhaps exposed as a prop, that way every Radio button in the table has a matching name to be gathered server-side via formData.get('school')
  • Have the value attribute match the given Row's ID, available in row.id

In this way, a DataTable can be wrapped in <form> and be submittable without JS.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. You're right – the name should in fact be the same for all rows in the table (barring the select all).

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.

Selecting a row on one DataTable unchecks radio button on another DataTable
2 participants