Tableselect checkboxes become toggles -- and tablesaw makes it worse

Created on 30 December 2022, over 1 year ago
Updated 27 June 2024, about 17 hours ago

Problem/Motivation

We did a large amount of updates and tableselect per row checkboxes became a toggle. That was easy to fix but after that the checkbox, despite appearing in the DOM didn't appear in the browser. *takes deep breath* Now, to misquote the great Eric Meyer, my use of CSS is not dissimilar to that of a koala bear trying to operate a Learjet, but still: I tried to fix the CSS. I think the not(td) > selector wants to exclude a checkbox appearing right inside a table cell but tablesaw injects a span in there. So that's what I added to the exclude list.

Steps to reproduce

I think tablesaw originates from the responsive_tables_filter module although I do not know, it is possible it comes from custom code. All the frontend engineers are enjoying their well deserved time off. So install that module and see what happens? I will get confirmation next week whether it's contrib or not.

Proposed resolution

Remaining tasks

File a core issue similar to #2643012 which would allow better detection of tableselect.

User interface changes

API changes

Data model changes

๐Ÿ› Bug report
Status

Closed: duplicate

Version

3.0

Component

Code

Created by

๐Ÿ‡จ๐Ÿ‡ฆCanada Charlie ChX Negyesi ๐ŸCanada

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada Charlie ChX Negyesi ๐ŸCanada

    Rerolled.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany digitaldonkey

    #6 for me.
    Before Gin on /admin/people/permissions was unusable. Patch fixed it.

  • Status changed to Needs work about 1 month ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States mortona2k Seattle

    The patch works for RC10, but needs to be rerolled for dev.

  • First commit to issue fork.
  • Status changed to Closed: duplicate 21 days ago
  • ๐Ÿ‡จ๐Ÿ‡ญSwitzerland saschaeggi Zurich

    Can somebody test this with the latest 8.x-3.x-dev? We did cleanup quite a bit of code for tables, just to check if this is now obsolete or if we still need to investigate this ๐Ÿ‘€

    Thank you!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Tirupati_Singh

    @saschaeggi, I tried replicating the issue on the latest 8.x.3.x-dev version and the issue persists. On selecting the Stack mode on Tablesaw mode option using the responsive_tables_filter module, the table select checkbox is converted into toggle mode and design is breaking for the toggle option. I've tested all the mode options available in the Tablesaw mode, Swipe mode and Column toggle mode is working fine but the Stack mode is breaking the design and it turns the checkbox into a toggle which is not being rendered properly. Attaching screenshots for the reference.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Tirupati_Singh

    I tried applying the provided patches but the patching is not getting applied. Getting errors while applying the patch

      - Applying patches for drupal/gin
        https://www.drupal.org/files/issues/2023-01-06/3330248_5.patch (Table column toggle)
    Testing ability to patch with git apply. This command may produce errors that can be safely ignored.
    git -C '/app/web/themes/contrib/gin' apply --check -v '-p1' '/tmp/667d0ef9da536.patch'
    Checking patch dist/css/base/gin.css...
    
    error: while searching for:
      background-color: var(--gin-border-color-form-element);
    }
    
    :not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px);
      overflow: hidden;
    
    error: patch failed: dist/css/base/gin.css:1913
    error: dist/css/base/gin.css: patch does not apply
    Checking patch includes/form.theme...
    
    error: while searching for:
      if ($variables['element']['#type'] === 'checkbox') {
        // Way to identify if checkbox is in a checkboxes group
        // as Drupal doesn't provide one yet (see #2643012)
        if (!isset($variables['element']['#error_no_message'])) {
          $suggestions[] = 'input__checkbox__toggle';
        }
      }
    }
    
    
    error: patch failed: includes/form.theme:115
    error: includes/form.theme: patch does not apply
    Checking patch styles/base/_form.scss...
    
    error: while searching for:
    }
    
    // Single Checkbox: show as toggle
    :not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
      position: relative;
      margin-left: 0;
    
    
    error: patch failed: styles/base/_form.scss:122
    error: styles/base/_form.scss: patch does not apply
    
    Testing ability to patch with git apply. This command may produce errors that can be safely ignored.
    git -C '/app/web/themes/contrib/gin' apply --check -v '-p0' '/tmp/667d0ef9da536.patch'
    Checking patch a/dist/css/base/gin.css => b/dist/css/base/gin.css...
    error: a/dist/css/base/gin.css: No such file or directory
    Checking patch a/includes/form.theme => b/includes/form.theme...
    error: a/includes/form.theme: No such file or directory
    Checking patch a/styles/base/_form.scss => b/styles/base/_form.scss...
    error: a/styles/base/_form.scss: No such file or directory
    
    Testing ability to patch with git apply. This command may produce errors that can be safely ignored.
    git -C '/app/web/themes/contrib/gin' apply --check -v '-p2' '/tmp/667d0ef9da536.patch'
    Checking patch css/base/gin.css...
    error: css/base/gin.css: No such file or directory
    Checking patch form.theme...
    error: form.theme: No such file or directory
    Checking patch base/_form.scss...
    error: base/_form.scss: No such file or directory
    
    Testing ability to patch with git apply. This command may produce errors that can be safely ignored.
    git -C '/app/web/themes/contrib/gin' apply --check -v '-p4' '/tmp/667d0ef9da536.patch'
    error: git diff header lacks filename information when removing 4 leading pathname components (line 24)
    
    patch '-p1' --no-backup-if-mismatch -d '/app/web/themes/contrib/gin' < '/tmp/667d0ef9da536.patch'
    patching file dist/css/base/gin.css
    
    Hunk #1 FAILED at 1913.
    
    1 out of 1 hunk FAILED -- saving rejects to file dist/css/base/gin.css.rej
    patching file includes/form.theme
    
    Hunk #1 FAILED at 115.
    
    1 out of 1 hunk FAILED -- saving rejects to file includes/form.theme.rej
    
    patching file styles/base/_form.scss
    
    Hunk #1 FAILED at 122.
    1 out of 1 hunk FAILED -- saving rejects to file styles/base/_form.scss.rej
    
    patch '-p0' --no-backup-if-mismatch -d '/app/web/themes/contrib/gin' < '/tmp/667d0ef9da536.patch'
    can't find file to patch at input line 11
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |commit 4b63a81
    |Author: Karoly Negyesi <chx1975@gmail.com>
    |Date:   Thu Jan 5 17:58:51 2023 -0800
    |
    |    5
    |
    |diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
    |index ca584bc..5ff1c12 100644
    |--- a/dist/css/base/gin.css
    |+++ b/dist/css/base/gin.css
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    
    1 out of 1 hunk ignored
    can't find file to patch at input line 24
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |diff --git a/includes/form.theme b/includes/form.theme
    |index a9423c1..8c33970 100644
    |--- a/includes/form.theme
    |+++ b/includes/form.theme
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    1 out of 1 hunk ignored
    can't find file to patch at input line 52
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |diff --git a/styles/base/_form.scss b/styles/base/_form.scss
    |index 4ac9404..4c71c34 100644
    |--- a/styles/base/_form.scss
    |+++ b/styles/base/_form.scss
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    1 out of 1 hunk ignored
    
    patch '-p2' --no-backup-if-mismatch -d '/app/web/themes/contrib/gin' < '/tmp/667d0ef9da536.patch'
    can't find file to patch at input line 11
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |commit 4b63a81
    |Author: Karoly Negyesi <chx1975@gmail.com>
    |Date:   Thu Jan 5 17:58:51 2023 -0800
    |
    |    5
    |
    |diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
    |index ca584bc..5ff1c12 100644
    |--- a/dist/css/base/gin.css
    |+++ b/dist/css/base/gin.css
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    
    1 out of 1 hunk ignored
    can't find file to patch at input line 24
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |diff --git a/includes/form.theme b/includes/form.theme
    |index a9423c1..8c33970 100644
    |--- a/includes/form.theme
    |+++ b/includes/form.theme
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    
    1 out of 1 hunk ignored
    
    
    can't find file to patch at input line 52
    
    Perhaps you used the wrong -p or --strip option?
    
    The text leading up to this was:
    --------------------------
    
    |diff --git a/styles/base/_form.scss b/styles/base/_form.scss
    |index 4ac9404..4c71c34 100644
    |--- a/styles/base/_form.scss
    |+++ b/styles/base/_form.scss
    --------------------------
    
    File to patch: 
    
    Skip this patch? [y] 
    
    Skipping patch.
    
    1 out of 1 hunk ignored
    
    
    patch '-p4' --no-backup-if-mismatch -d '/app/web/themes/contrib/gin' < '/tmp/667d0ef9da536.patch'
    can't find file to patch at input line 11
    
    Perhaps you used the wrong -p or --strip option?
    
    The text leading up to this was:
    --------------------------
    
    |commit 4b63a81
    |Author: Karoly Negyesi <chx1975@gmail.com>
    |Date:   Thu Jan 5 17:58:51 2023 -0800
    |
    |    5
    |
    |diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
    |index ca584bc..5ff1c12 100644
    |--- a/dist/css/base/gin.css
    |+++ b/dist/css/base/gin.css
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    
    1 out of 1 hunk ignored
    can't find file to patch at input line 24
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |diff --git a/includes/form.theme b/includes/form.theme
    |index a9423c1..8c33970 100644
    |--- a/includes/form.theme
    |+++ b/includes/form.theme
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    1 out of 1 hunk ignored
    can't find file to patch at input line 52
    Perhaps you used the wrong -p or --strip option?
    The text leading up to this was:
    --------------------------
    |diff --git a/styles/base/_form.scss b/styles/base/_form.scss
    |index 4ac9404..4c71c34 100644
    |--- a/styles/base/_form.scss
    |+++ b/styles/base/_form.scss
    --------------------------
    File to patch: 
    Skip this patch? [y] 
    Skipping patch.
    
    1 out of 1 hunk ignored
    
       Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2023-01-06/3330248_5.patch
    
Production build 0.69.0 2024