eclipse-theia/theia

Half-Hidden tab getting close while not clicking on close button

Open

#8,431 opened on Aug 25, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (18,676 stars) (2,478 forks)batch import
bughelp wantedui/ux

Description

Bug Description:

When you are clicking at the right most part of a half-hidden tab, the tab in question gets closed (Zone highlighted in red) : image

Steps to Reproduce:

  1. Open many files
  2. Scroll your tabs to have on tab half hidden to the right of the tabbar
  3. click on the right most part of the tab

Additional Information

This error comes from PhosphorJS which is now abandonned as discussed in this thread : https://github.com/eclipse-theia/theia/issues/6501 In phosphorJS tabbar when the mousedown event is received, the tab that is clicked becomes the default one, so the tabbar gets centered on this tab. In the mouse up event, there is a check if the click was made on the close icon. This check returns true because now the tabbar was recentered on the tab clicked and so the click calls the close tab. I checked with VSCode and in this case, the tab only gets selected : not closed

  • Operating System: Any
  • Theia Version: Latest

Contributor guide

Tech stack
typescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptDOM event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the tabbar implementation in Theia, likely in packages/core/src/browser/tabbar.ts or similar. The bug is due to PhosphorJS tabbar recentering on mousedown, causing mouseup to incorrectly detect close icon click. Look at how the close button click is detected and ensure it only triggers when the mouse is actually over the close icon. Consider using a different approach like checking event.target or coordinates. Also check if there is any existing fix in Theia since this issue is from 2020.