fix: remove chat-pending-dragging class on re-render to fix opacity issue (#299886)

* fix: remove chat-pending-dragging class on re-render to fix opacity issue

Fixes #297473

The 'chat-pending-dragging' class (which sets opacity: 0.4) was not being
removed when elements were re-rendered. This caused messages to randomly
appear with lower opacity if they had been dragged before the list was
updated.

The fix adds 'chat-pending-dragging' to the classList.remove() call that
clears pending-related classes during re-render.

* fix: move class cleanup before pending divider rendering

Addresses review feedback: the chat-pending-dragging class was only
being removed on the normal render path. If a recycled template was
rendered as a pending divider, it would return early before the cleanup
code ran, leaving the class and opacity stuck at 0.4.

This moves the class cleanup to run before the isPendingDividerVM check,
ensuring it's always applied regardless of element type.
This commit is contained in:
Connor Peet
2026-03-06 15:38:18 -08:00
committed by GitHub
parent 19b032d2ff
commit 175e346f3f

View File

@@ -685,6 +685,14 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
templateData.currentElement = element;
this.templateDataByRequestId.set(element.id, templateData);
// Clear pending-related classes and drag handle from previous renders
// Do this before element-type checks to ensure dividers also get cleaned up
templateData.rowContainer.classList.remove('pending-item', 'pending-divider', 'pending-request', 'chat-pending-dragging');
templateData.dragHandle?.remove();
templateData.dragHandle = undefined;
delete templateData.rowContainer.dataset.pendingRequestId;
delete templateData.rowContainer.dataset.pendingKind;
// Handle pending divider with simplified rendering
if (isPendingDividerVM(element)) {
this.renderPendingDivider(element, templateData);
@@ -730,12 +738,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
templateData.rowContainer.classList.toggle('editing-session', location === ChatAgentLocation.Chat);
templateData.rowContainer.classList.toggle('interactive-request', isRequestVM(element));
templateData.rowContainer.classList.toggle('interactive-response', isResponseVM(element));
// Clear pending-related classes and drag handle from previous renders
templateData.rowContainer.classList.remove('pending-item', 'pending-divider', 'pending-request');
templateData.dragHandle?.remove();
templateData.dragHandle = undefined;
delete templateData.rowContainer.dataset.pendingRequestId;
delete templateData.rowContainer.dataset.pendingKind;
const progressMessageAtBottomOfResponse = checkModeOption(this.delegate.currentChatMode(), this.rendererOptions.progressMessageAtBottomOfResponse);
templateData.rowContainer.classList.toggle('show-detail-progress', isResponseVM(element) && !element.isComplete && !element.progressMessages.length && !progressMessageAtBottomOfResponse);
if (!this.rendererOptions.noHeader) {