Skip to content

fix(pds-dropdown-menu-item): add reflect to prop#659

Draft
QuintonJason wants to merge 1 commit intomainfrom
fix/dropdown-item-disabled
Draft

fix(pds-dropdown-menu-item): add reflect to prop#659
QuintonJason wants to merge 1 commit intomainfrom
fix/dropdown-item-disabled

Conversation

@QuintonJason
Copy link
Contributor

@QuintonJason QuintonJason commented Feb 4, 2026

Description

  • Add reflect: true to the disabled prop on pds-dropdown-menu-item to ensure the attribute is properly observed when set via server-rendered HTML

Problem

When using pds-dropdown-menu-item with the disabled attribute set in server-rendered HTML (e.g., from Rails templates), the component wasn't properly recognizing the disabled state. The is-disabled class wasn't being applied, and the visual disabled styling (opacity, cursor) wasn't rendering.

Solution

Added { reflect: true } to the disabled prop decorator. This ensures:

  1. The HTML attribute is properly observed when set during initial render
  2. Changes to the prop value are reflected back to the DOM attribute
  3. The is-disabled class gets applied correctly, enabling the disabled styling

Fixes DSS-128

Type of change

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

How Has This Been Tested?

Please describe the tests you've added and run to verify your changes.
Provide instructions so that we can reproduce.
Please also list any relevant details for your test configuration.

  • unit tests
  • e2e tests
  • accessibility tests
  • tested manually
  • other:

Test Configuration:

  • Pine versions:
  • OS:
  • Browsers:
  • Screen readers:
  • Misc:

Checklist:

If not applicable, leave options unchecked.

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • Design has QA'ed and approved this PR

@QuintonJason QuintonJason self-assigned this Feb 4, 2026
@netlify
Copy link

netlify bot commented Feb 4, 2026

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 3bd92b4
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/6982b9329598c3000887c80a
😎 Deploy Preview https://deploy-preview-659--pine-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions github-actions bot added bug Something isn't working package: core Changes have been made to the Core package labels Feb 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working package: core Changes have been made to the Core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant