Skip to content

fix(pds-dropdown-menu-item): add reflect option to target and external props#656

Merged
QuintonJason merged 3 commits intomainfrom
fix/dropdown-item-external
Feb 2, 2026
Merged

fix(pds-dropdown-menu-item): add reflect option to target and external props#656
QuintonJason merged 3 commits intomainfrom
fix/dropdown-item-external

Conversation

@QuintonJason
Copy link
Contributor

Description

Fixes the target and external props on pds-dropdown-menu-item not working when set via HTML attributes.

The target and external props were added in v3.15.0 but weren't being reflected from HTML attributes to component properties. This prevented them from being passed to the nested pds-link component, making it impossible for links in dropdown menus to open in new tabs.

Root Cause

Stencil requires the reflect: true option on @Prop() decorators to sync HTML attributes with component properties. Without this option, setting an attribute like target="_blank" would add the HTML attribute but not update the component property.

Solution

Added reflect: true to both prop decorators in pds-dropdown-menu-item.tsx to ensure proper attribute-to-property synchronization.

Fixes DSS-116

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • unit tests - All existing tests pass, including pds-dropdown-menu-item.spec.tsx
  • e2e tests
  • accessibility tests
  • tested manually - Verified target="_blank" opens links in new tabs and external adds icon
  • other:

Test Configuration:

  • Pine versions: 3.15.1
  • OS: macOS
  • Browsers: Chrome, Safari
  • Screen readers: N/A
  • Misc: Built successfully with no errors

Checklist:

  • 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

@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 77f873d
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/697d3b12bf97c4000846e13d
😎 Deploy Preview https://deploy-preview-656--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.

@QuintonJason QuintonJason marked this pull request as ready for review January 30, 2026 23:13
@github-actions github-actions bot added bug Something isn't working package: core Changes have been made to the Core package labels Jan 30, 2026
@QuintonJason QuintonJason self-assigned this Feb 2, 2026
@QuintonJason QuintonJason merged commit 172ff39 into main Feb 2, 2026
15 checks passed
@QuintonJason QuintonJason deleted the fix/dropdown-item-external branch February 2, 2026 18:10
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.

3 participants