[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:  Administration  |     Version:  4.7
 Severity:  normal          |  Resolution:
 Keywords:                  |     Focuses:  javascript
----------------------------+------------------------------
Changes (by SergeyBiryukov):

 * component:  General => Administration


Old description:

> 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.

New description:

 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.

--

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