[wp-trac] [WordPress Trac] #39739: Select All Checkbox Not Working

[WordPress Trac]

#39739: Select All Checkbox Not Working
--------------------------+-----------------------------
 Reporter:  reldev        |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  4.7
 Severity:  normal        |   Keywords:
  Focuses:  javascript    |
--------------------------+-----------------------------
 I'm seeing a problem that appears to be related to the change introduced
 by ticket 37972 in 4.7  ([https://core.trac.wordpress.org/ticket/37973]).
 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39739>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform