Repository navigation
Fix breadcrumb dropdown not opening on smaller viewports - #26391
AmoghParmar wants to merge 2 commits into
Conversation
comment-ops-bot
Bot
added
bug
MarkEWaite
changed the title
| animation: "tooltip", | ||
| touch: false, | ||
| touch: true, | ||
| interactive: true, |
There was a problem hiding this comment.
Has this been tested on an actual touch device, or only via DevTools responsive mode? Also worth checking if interactive: true introduces any unintended side effects on the hover-based dropdowns given they share the same Tippy config base.
There was a problem hiding this comment.
Hello @SalmanDeveloperz buddy,
I tested the change locally by running Jenkins and verifying the behavior using DevTools responsive mode across different viewport widths. The breadcrumb dropdown now opens correctly when clicking the chevron (the small arrow next to the breadcrumb).
I have not tested on a physical touch device yet, only via DevTools responsive mode. And I also verified that the hover-based dropdowns still work normally on desktop view. Hover menus for items and breadcrumb links behave the same as before and are not affected by this change. So far I did not observe any unintended side effects from setting interactive: true.
There was a problem hiding this comment.
Pull request overview
Fixes an interaction regression where the breadcrumb “dropdown indicator” becomes unclickable on touch-capable viewports (including DevTools responsive mode) due to the Tippy.js touch: false setting.
Changes:
- Enable touch interactions for
.dropdown-indicatordropdowns by switchingtouchtotrue. - Explicitly mark the dropdown as
interactivefor the clickable breadcrumb indicator configuration.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Fixes #26390
Problem
The breadcrumb dropdown indicator becomes unresponsive on smaller viewports and in DevTools responsive mode. Clicking the dropdown indicator produces no response and no console errors.
Cause
The
.dropdown-indicatordropdown was configured withtouch: falsein the Tippy.js-based Jenkins dropdown implementation.When the browser reports touch capability (DevTools responsive mode or real touch devices), Tippy ignores interaction events entirely, preventing the dropdown from opening.
Fix
Updated the Tippy configuration in:
src/main/js/components/dropdowns/jumplists.jstouch: false→touch: truefor.dropdown-indicatorinteractive: trueto prevent the dropdown from closing before item clicks registerThe hover-based
.hoverable-model-linkdropdown intentionally keepstouch: false, since hover interactions are not applicable on touch devices.Testing Done
Tested manually on Jenkins 2.552-SNAPSHOT (Ubuntu 24.04 / Java 21):
Screenshots (UI changes only)
Before
After
(dropdown opens correctly on click at all viewport sizes)
Automated Tests
This change affects browser interaction behaviour handled by Tippy.js and depends on touch capability detection, which is difficult to reliably simulate in existing Jenkins UI test infrastructure. Manual verification was performed instead.
Proposed Changelog Entry
Fix breadcrumb dropdown not responding to clicks on smaller viewports and touch-capable devices.
Proposed Changelog Category
/label bug, web-ui
Proposed Upgrade Guidelines
N/A
Submitter Checklist
Desired Reviewers
@jenkinsci/core-pr-reviewers