fix(pds-table-row): fix checkbox double-fire and z-index bleed-through

[pixelflips]

Description

Fixes two issues with pds-table selectable tables, reported from Kajabi Products (Media Library index page with selectable DataTableComponent).

1. Checkbox double-fire (pds-table-row)

The pdsTableRowSelected event's detail.isSelected property is unreliable. When clicking a checkbox, the event sometimes fires twice in the same synchronous tick — first with isSelected: true, then immediately with isSelected: false — even though the user only checked the box.

Root cause: In pds-table-row.tsx, the checkbox was wired with onClick on the pds-checkbox element. Inside pds-checkbox's shadow DOM, a <label htmlFor="X"> wraps <input id="X">. When a click lands on the <label> (not directly on the <input>), the browser's label activation algorithm dispatches a synthetic click on the input, causing the onClick handler to fire twice. The handler toggled isSelected via !this.isSelected, so it toggled to true then immediately back to false.

This was intermittent because it depended on whether the click hit the native <input> element directly (one event, correct) or the <label> area (two events, broken).

Fix: Switch from onClick to onPdsCheckboxChange on the internal pds-checkbox. The pdsCheckboxChange event fires exactly once per interaction (from the native input's onChange). Reads event.detail.checked directly instead of toggling with !this.isSelected.

2. Z-index bleed-through (pds-table)

Sticky checkbox cells in pds-table-row and pds-table-head use z-index: var(--pine-z-index-raised) which resolves to 1000. When a consuming application has a fixed header with a lower z-index (e.g. 901), the sticky checkbox cells and toolbar elements render on top of the header when the page is scrolled.

Fix: Add isolation: isolate to the pds-table :host styles. This creates a stacking context that scopes all internal z-indices so they don't compete with page-level elements. Internal stacking (sticky cells above regular cells, fixed columns, scroll shadows) continues to work correctly within the table's own stacking context.

Fixes DSS-168

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• unit tests
• e2e tests
• tested manually

Test Configuration:

• Pine versions: local dev build linked to Kajabi Products
• OS: macOS
• Browsers: Chrome
• Tested on: Kajabi Products Media Library index page with selectable DataTableComponent

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	77411d7
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6994c65603580e0008140402
😎 Deploy Preview	https://deploy-preview-679--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

The pds-table-row component replaces its click handler with handleCheckboxChange(event: CustomEvent<CheckboxChangeEventDetail>), updating isSelected from event.detail.checked and switching the checkbox binding from onClick to onPdsCheckboxChange. Tests now dispatch the pdsCheckboxChange CustomEvent and e2e tests target the input inside pds-checkbox. The pds-table host CSS adds isolation: isolate.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures both main fixes: checkbox double-fire issue and z-index bleed-through problem in pds-table components.
Description check	✅ Passed	The pull request description is comprehensive and includes all required template sections: detailed explanation of both bug fixes with root causes, type of change marked, testing methods specified, and checklist completed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/table-row-checkbox-double-fire

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.3.0)

libs/core/src/components/pds-table/pds-table.scss

ConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:241:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:208:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:73:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:202:19)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx (1)

43-43: Consider adding explicit type annotation for better type safety.

The event parameter could be typed more precisely to improve code clarity and enable compile-time checks.

💡 Suggested type annotation

-  private handleCheckboxChange = (event: CustomEvent) => {
+  private handleCheckboxChange = (event: CustomEvent<{ checked: boolean }>) => {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx` at line
43, The parameter for handleCheckboxChange lacks a precise type; change its
signature to accept a typed CustomEvent (e.g., event: CustomEvent<{ checked:
boolean }>) so TypeScript can validate event.detail usage; update any internal
references to use event.detail.checked and ensure the event payload shape
matches the emitter that dispatches the checkbox change.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx`:
- Line 43: The parameter for handleCheckboxChange lacks a precise type; change
its signature to accept a typed CustomEvent (e.g., event: CustomEvent<{ checked:
boolean }>) so TypeScript can validate event.detail usage; update any internal
references to use event.detail.checked and ensure the event payload shape
matches the emitter that dispatches the checkbox change.

[pixelflips]

@coderabbitai i have addressed the nitpick comment, please review.

[coderabbitai]

@pixelflips Thank you for addressing the nitpick! I'll review the changes now.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[sdhull]

looks promising, thank you! I played with the deployment preview and all seems well