Opened 9 years ago
Closed 9 years ago
#39739 closed defect (bug) (fixed)
Select All Checkbox Not Working
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 4.7.3 | Priority: | normal |
| Severity: | normal | Version: | 4.7 |
| Component: | Administration | Keywords: | has-patch commit fixed-major |
| Focuses: | javascript | Cc: |
Description (last modified by )
I'm seeing a problem that appears to be related to the change introduced by ticket #37973 in 4.7. I did not see this issue on 4.6.2, but have verified it also exists on 4.7.1 and 4.7.2.
In short, I have a "select all" checkbox in a table on an admin page that is not functioning properly if the checkbox is within a nested table. If I click the checkbox, it is never "checked" and the checkboxes below in the table are never checked either. I've simplified my html quite a bit in order to isolate the problem and here is an HTML snippet that can be used to reproduce the problem:
<table class="form-table">
<tbody>
<tr>
<td>
<table class="wp-list-table fixed widefat striped">
<thead>
<tr>
<th scope="col" class="manage-column check-column">
<label><input type="checkbox" class="check-all"></label>
</th>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody id="the-list">
<tr>
<th scope="row" class=" check-column">
<input type="checkbox" id="cb-select-1" name="nslb_import_rows" class="nslb-input" value="1">
</th>
<td>
Steven<input type="hidden" name="s_1_1" class="nslb-input" value="Steven">
</td>
</tr>
<tr>
<th scope="row" class=" check-column">
<input type="checkbox" id="cb-select-2" name="nslb_import_rows" class="nslb-input" value="2">
</th>
<td>
David<input type="hidden" name="s_2_1" class="nslb-input" value="David">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What's happening specifically is that the code in common.js on line 421 at the 4.7+ level ($body.on('click'...) is firing when I click the "manage-column check-column" checkbox because it's in a <tbody> element (nested as in my example above). The code on line 430 in common.js at the 4.6.2 level that 37972 replaced does not fire when I select the same checkbox and it functions properly. The code on line 443 and following in common.js at the 4.7+ level is attempting to determine how to toggle any "select all" checkboxes in a table header or footer but since we're incorrectly in this routine, "false" is being returned for the most part meaning the "manage-column check-column" checkbox will never be checked and the other checkboxes in the following <tbody> will not be checked either. It seems the code at the 4.7+ level is assuming checkboxes within a <tbody> would not also be a "select all" checkbox, but bounded by a <thead> and <tfoot> where the select all boxes would typically be. Because I've nested a table within another <tbody>, this code incorrectly fires.
Attachments (1)
Change History (14)
#2
@
9 years ago
Changing
$body.on( 'click', 'tbody .check-column :checkbox', function( event ) {
in
$body.on( 'click', 'tbody > .check-column :checkbox', function( event ) {
should fix it. @reldev could you please check if that addresses your specific use case?
Even if I'm not sure nested tables are a good thing, if the fix is so simple I'd be in favor of fixing it ;)
#5
@
9 years ago
@afercia I can verify the fix you provided takes care of this problem. Thanks so much for the quick response!
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
9 years ago
#8
@
9 years ago
- Keywords commit added
Although nested tables like this is an edge case, I see no reason not to make the selector more specific to ensure it works. 39739.diff looks good to me.
This ticket was mentioned in Slack in #core by jnylen. View the logs.
9 years ago
#10
@
9 years ago
- Owner set to SergeyBiryukov
- Status changed from new to assigned
Handing this off to @SergeyBiryukov for commit per above Slack discussion.
Sorry, I inadvertently referenced the ticket that introduced the bug as 37972 and it should 37973. The link to the ticket is correct however.