Checkboxes on custom `WP_List_Table` also check select all

Question

In a bespoke theme, I have a custom class that extends WP_List_Table. The relevant parts look somewhat like this:

class Custom_List_Table extends WP_List_Table
    function get_columns(): array
    {
        return [
            'cb' => '<input type="checkbox" />'
        ];
    }

    protected function column_cb($item)
    {
        return sprintf(
            '<input type="checkbox" name="%1$s[]" value="%2$s" id="cb-select-%2$s" />' . '<label for="cb-select-%2$s"><span class="screen-reader-text">%1$s</span></label>',
            /*$1%s*/ $this->_args['singular'],
            /*$2%s*/ $item['id']
        );
    }
}

This works, but I noticed something curious that does not appear to happen with other list tables in the WordPress admin.

When I click a checkbox of an individual row, the select all checkboxes in the table header and footer also get activated. Curiously, it does not trigger the actual select all functionality, so the other rows remain unaffected. This causes a state discrepancy, since the select all checkboxes imply all rows are checked, which is not true. (See screenshot.)

Does anyone recognize this behavior? I can’t seem to find anything about this being a known bug.

Answer 1

I ran into this same problem and did some digging. The jQuery selector to find the checkboxes includes an iedit class on the table <tr> elements. I assume this class is added via JavaScript on tables that have inline editing, but my <tr> elements had no classes as I'm not using inline editing.

I was able to solve the issue by adding this method to my table class. You may need to do some minor tweaking to get the iedit class there if you already have a class attribute on your rows.

public function single_row( $item ) {
    ob_start();
    parent::single_row( $item );
    $output = ob_get_clean();
    echo str_replace( '<tr>', '<tr class="iedit">', $output );
}

And here's the source JavaScript with the issue: https://github.com/WordPress/wordpress-develop/blob/b4889e474c77ba4ed7a492441fd948eb124a3e77/src/js/_enqueues/admin/common.js#L1172