Skip to content

Fix breadcrumb dropdown not opening on smaller viewports#26391

Open
AmoghParmar wants to merge 1 commit intojenkinsci:masterfrom
AmoghParmar:fix-JENKINS-26390-breadcrumb-dropdown
Open

Fix breadcrumb dropdown not opening on smaller viewports#26391
AmoghParmar wants to merge 1 commit intojenkinsci:masterfrom
AmoghParmar:fix-JENKINS-26390-breadcrumb-dropdown

Conversation

@AmoghParmar
Copy link
Contributor

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-indicator dropdown was configured with touch: false in 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.js

  • Changed touch: falsetouch: true for .dropdown-indicator
  • Added interactive: true to prevent the dropdown from closing before item clicks register

The hover-based .hoverable-model-link dropdown intentionally keeps touch: false, since hover interactions are not applicable on touch devices.

Testing Done

Tested manually on Jenkins 2.552-SNAPSHOT (Ubuntu 24.04 / Java 21):

  • ✅ Dropdown works at normal desktop width
  • ✅ Dropdown opens correctly in DevTools responsive mode (320px–768px)
  • ✅ Dropdown items remain clickable
  • ✅ No regression in desktop hover behaviour

Screenshots (UI changes only)

Before

Screenshot from 2026-03-01 12-54-10

After

image

(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

  • Issue is well described
  • Changelog entry added
  • No CSP regressions introduced
  • Manual testing performed for UI interaction change

Desired Reviewers

@jenkinsci/core-pr-reviewers

@comment-ops-bot comment-ops-bot bot added bug For changelog: Minor bug. Will be listed after features web-ui The PR includes WebUI changes which may need special expertise labels Mar 1, 2026
@MarkEWaite MarkEWaite changed the title [JENKINS-26390] Fix breadcrumb dropdown not opening on smaller viewports Fix breadcrumb dropdown not opening on smaller viewports Mar 1, 2026
animation: "tooltip",
touch: false,
touch: true,
interactive: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Labels

bug For changelog: Minor bug. Will be listed after features web-ui The PR includes WebUI changes which may need special expertise

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Breadcrumb dropdown not working on smaller viewports

2 participants