fix clicks on post types label not toggling correct checkbox

Currently, all the post types checkbox are being assigned the
same "postTypes" id, so clicking on any of the post type labels
always toggles the first one. If you inspect the HTML, all the
post type labels have 'for="postTypes"' which is how the HTML
knows which checkbox to toggle.

We have to keep the "name" attribute the same because that's how
the checkbox values are linked to the postTypes field.

To fix, we explicitly assign the id prop for each checkbox so
that the <label>'s "for" attribute is tied to the correct
checkbox input.
This commit is contained in:
mzivil 2024-02-03 16:31:22 -05:00
parent 4789a93778
commit 3328c1daa3

View File

@ -109,6 +109,7 @@ export default function TerritoryForm ({ sub }) {
label='links' label='links'
value='LINK' value='LINK'
name='postTypes' name='postTypes'
id='links-checkbox'
groupClassName='ms-1 mb-0' groupClassName='ms-1 mb-0'
/> />
</Col> </Col>
@ -118,6 +119,7 @@ export default function TerritoryForm ({ sub }) {
label='discussions' label='discussions'
value='DISCUSSION' value='DISCUSSION'
name='postTypes' name='postTypes'
id='discussions-checkbox'
groupClassName='ms-1 mb-0' groupClassName='ms-1 mb-0'
/> />
</Col> </Col>
@ -127,6 +129,7 @@ export default function TerritoryForm ({ sub }) {
label='bounties' label='bounties'
value='BOUNTY' value='BOUNTY'
name='postTypes' name='postTypes'
id='bounties-checkbox'
groupClassName='ms-1 mb-0' groupClassName='ms-1 mb-0'
/> />
</Col> </Col>
@ -136,6 +139,7 @@ export default function TerritoryForm ({ sub }) {
label='polls' label='polls'
value='POLL' value='POLL'
name='postTypes' name='postTypes'
id='polls-checkbox'
groupClassName='ms-1 mb-0' groupClassName='ms-1 mb-0'
/> />
</Col> </Col>