[BUG] [v1.1.0] Auxiliary sidebar resize handle: no hover highlight after resize if pointer re-entered while dragging

[tubel-hi]

Project

ide

Description

onMouseEnter only applies the hover background when !isResizing(). During an active resize, moving off the handle and back does not get a successful hover application on re-entry. When mouseup ends the resize, the pointer can still be over the handle, but the browser does not fire another mouseenter, so the imperative hover never runs. onMouseLeave is similarly gated, so cleanup during resize is also skipped—combined with the reactive background returning to "transparent" when isResizing() becomes false, the handle stays visually idle even though the cursor is on it.

Error Message

Debug Logs

System Information

OS: Ubuntu
Context: Bounty Challenge v1.1.0

Screenshots

7.webm

Steps to Reproduce

Mousedown on the auxiliary sidebar resize handle to start resizing.
While still holding the button, move the pointer off the handle briefly, then back onto it.
Mouseup to finish resizing while the cursor remains over the handle.

Expected Behavior

After resize ends, if the pointer is over the handle, the same hover highlight as a normal hover (e.g. primary tint) should appear.

Actual Behavior

No hover highlight: mouseenter was ignored for the whole resize, and no new mouseenter fires when resizing stops.

Additional Context

No response

[willkhinz]

/attempt #39587

[willkhinz]

/attempt #39587

[echobt]

✅ Validated

VALID BUG REPORT - Confirmed in Code

Component Location:

• Found in src/components/ResizeHandle.tsx (lines 85-115)
• Used by src/components/AuxiliaryBar.tsx for the auxiliary sidebar resize functionality

Bug Analysis:
The issue describes a hover highlight bug on the auxiliary sidebar resize handle. After analyzing the code in ResizeHandle.tsx, I confirmed the bug exists:

The Problem:
In handleMouseEnter() (line 85-93), the code sets up a 300ms timeout to show the hover indicator, but this timeout only checks isHovered() && !props.disabled - it does NOT check isDragging().

When a user:

1. Starts dragging (mousedown) - isDragging() becomes true, showHoverIndicator is set to true
2. Moves off the handle while dragging - handleMouseLeave() is called but doesn't clear the indicator because isDragging() is true
3. Moves back onto the handle while dragging - handleMouseEnter() sets up a timeout, but the timeout callback doesn't account for the dragging state properly
4. Releases mouse while over the handle - handleMouseUp() sets isDragging() to false, but showHoverIndicator may not be properly set because the timeout already fired during dragging or the state is inconsistent

The Code Flaw:

const handleMouseEnter = () => {
  setIsHovered(true);
  hoverTimeout = window.setTimeout(() => {
    if (isHovered() && !props.disabled) {  // Missing: && !isDragging()
      setShowHoverIndicator(true);
    }
  }, SASH_HOVER_DELAY);
};

The timeout callback should include !isDragging() in its condition, or the handleMouseUp() should re-trigger the hover check when dragging ends with the mouse still over the handle.

Video Evidence:
The video clearly demonstrates the bug - the blue hover highlight appears on initial hover, disappears when the user drags off and back on, and fails to reappear after mouseup even though the cursor is still over the handle.

Accessibility:
The AuxiliaryBar component is fully accessible - it's rendered via the LayoutContext and can be toggled through the UI. The ResizeHandle is a core UI component used throughout the application.