Skip to content

Conversation

@tejas161
Copy link

@tejas161 tejas161 commented Jul 10, 2025

What I did

  1. Demo File for rh-jump-links (scenario:- non-contiguous content)

Testing Instructions

Notes to Reviewers

See #2474 for more info.

@changeset-bot
Copy link

changeset-bot bot commented Jul 10, 2025

⚠️ No Changeset found

Latest commit: 430d1b7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link

netlify bot commented Jul 10, 2025

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/68933c571e2ba64dcb6b4701
😎 Deploy Preview https://deploy-preview-2471--red-hat-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.

@adamjohnson adamjohnson removed their request for review July 15, 2025 19:38
@bennypowers bennypowers changed the title Add demo for rh-jump-links (non-contiguous content) fix(jump-links): non-contiguous content Jul 22, 2025
@bennypowers bennypowers linked an issue Jul 22, 2025 that may be closed by this pull request
@bennypowers
Copy link
Member

@tejas161 test this by pulling latest commit and running

npm ci
npx patch-package
npm run dev

@tejas161
Copy link
Author

Thanks @bennypowers for pushing the fix ! Here is what I observed:

  1. When scrolling down, the active rh-jump-link seems incorrect — it highlights the section that's near the bottom of the viewport.
  2. When scrolling up, the active rh-jump-link behaves correctly — it highlights the section at the top.

Would it be possible to always target the section at the top of the viewport, similar to the behavior shown here: https://ux.redhat.com/elements/jump-links/demo/nested/?

Let me know what you think!

Attaching video of observed behaviour:-
https://github.com/user-attachments/assets/b9f55df6-d1d5-4ecc-af29-4d252bf9c9dd

@bennypowers
Copy link
Member

This isn't quite ready yet. @tejas161 ' most recent feedback on https://deploy-preview-2471--red-hat-design-system.netlify.app/elements/jump-links/demo/non-contiguous-regions/#chapter-5

Also, when scrolling all the way to the bottom, the last rh-jump-link doesn't get highlighted as active.

This is fixed
I noticed that sometimes when clicking an rh-jump-link, the active state gets applied to the previous link instead of the one clicked
I was able to reproduce this again, attaching the screen recording here

Screen.Recording.2025-08-06.at.17.28.10.mov

@adamjohnson can you give this a whack in patternfly/patternfly-elements#2920?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Review 🔍

Development

Successfully merging this pull request may close these issues.

[bug] <rh-jump-links> fails to highlight active section

3 participants