fix(accounts): clear multi-selection globally on Escape
Route account selection clearing through the existing window-level Escape handler so it works regardless of which account surface owns focus. Preserve text editing and open overlay behavior, and remove the misleading focus-dependent workspace handler.
This commit is contained in:
@@ -39,7 +39,7 @@ import {
|
|||||||
getProviderUsageDayKey
|
getProviderUsageDayKey
|
||||||
} from "../shared/provider-daily-limits";
|
} from "../shared/provider-daily-limits";
|
||||||
import { preservePackageOrderForDisplay, sortPackageOrderByName } from "./package-order";
|
import { preservePackageOrderForDisplay, sortPackageOrderByName } from "./package-order";
|
||||||
import { pruneSelection, shouldClearDownloadSelection, shouldClearDownloadSelectionOnEscape } from "./selection";
|
import { pruneSelection, resolveEscapeSelectionScope, shouldClearDownloadSelection } from "./selection";
|
||||||
import { buildConfiguredProviderOrder, buildScopedAccountEnabledState, getAccountDialogSelectableOptions, matchesAccountModeFilter, pruneAccountRowSelections, resolveAccountStatusState, resolveAccountUsername, resolveVisibleAccountKind, runOptimisticAccountUpdate, updateAccountRowSelection } from "./account-ui";
|
import { buildConfiguredProviderOrder, buildScopedAccountEnabledState, getAccountDialogSelectableOptions, matchesAccountModeFilter, pruneAccountRowSelections, resolveAccountStatusState, resolveAccountUsername, resolveVisibleAccountKind, runOptimisticAccountUpdate, updateAccountRowSelection } from "./account-ui";
|
||||||
import type { AccountModeFilter } from "./account-ui";
|
import type { AccountModeFilter } from "./account-ui";
|
||||||
import { buildAccountDeleteCommand, buildAccountReplaceCommand, buildAccountSecretRequest, createAccountEditState, validateAccountEdit } from "./account-edit";
|
import { buildAccountDeleteCommand, buildAccountReplaceCommand, buildAccountSecretRequest, createAccountEditState, validateAccountEdit } from "./account-edit";
|
||||||
@@ -4156,10 +4156,12 @@ export function App(): ReactElement {
|
|||||||
if (e.key === "Escape") {
|
if (e.key === "Escape") {
|
||||||
const target = e.target as HTMLElement;
|
const target = e.target as HTMLElement;
|
||||||
const inputType = target.tagName === "INPUT" ? (target as HTMLInputElement).type : "";
|
const inputType = target.tagName === "INPUT" ? (target as HTMLInputElement).type : "";
|
||||||
if (shouldClearDownloadSelectionOnEscape(target.tagName, inputType)) {
|
const selectionScope = resolveEscapeSelectionScope(tabRef.current, settingsSubTab, target.tagName, inputType);
|
||||||
|
if (selectionScope) {
|
||||||
if (document.querySelector(".ctx-menu") || document.querySelector(".modal-backdrop")) return;
|
if (document.querySelector(".ctx-menu") || document.querySelector(".modal-backdrop")) return;
|
||||||
if (tabRef.current === "downloads") setSelectedIds(new Set());
|
if (selectionScope === "downloads") setSelectedIds(new Set());
|
||||||
else if (tabRef.current === "history") setSelectedHistoryIds(new Set());
|
else if (selectionScope === "history") setSelectedHistoryIds(new Set());
|
||||||
|
else setSelectedAccountRowKeys(new Set());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (e.key === "Delete" && tabRef.current === "downloads" && selectedIds.size > 0) {
|
if (e.key === "Delete" && tabRef.current === "downloads" && selectedIds.size > 0) {
|
||||||
@@ -4177,7 +4179,7 @@ export function App(): ReactElement {
|
|||||||
window.addEventListener("keydown", onKey);
|
window.addEventListener("keydown", onKey);
|
||||||
window.addEventListener("mousedown", onDown);
|
window.addEventListener("mousedown", onDown);
|
||||||
return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("mousedown", onDown); };
|
return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("mousedown", onDown); };
|
||||||
}, [selectedIds, requestDeleteSelection]);
|
}, [requestDeleteSelection, selectedIds, settingsSubTab]);
|
||||||
|
|
||||||
const onExportBackup = async (): Promise<void> => {
|
const onExportBackup = async (): Promise<void> => {
|
||||||
closeMenus();
|
closeMenus();
|
||||||
@@ -4959,7 +4961,6 @@ export function App(): ReactElement {
|
|||||||
}
|
}
|
||||||
setSelectedAccountRowKeys((current) => new Set(updateAccountRowSelection([...current], rowKey, additive)));
|
setSelectedAccountRowKeys((current) => new Set(updateAccountRowSelection([...current], rowKey, additive)));
|
||||||
},
|
},
|
||||||
onClearSelection: () => setSelectedAccountRowKeys(new Set()),
|
|
||||||
onToggleEnabled: (rowId) => {
|
onToggleEnabled: (rowId) => {
|
||||||
const row = accountRowBindings.get(rowId);
|
const row = accountRowBindings.get(rowId);
|
||||||
if (row) toggleAccountTableRow(row);
|
if (row) toggleAccountTableRow(row);
|
||||||
|
|||||||
@@ -13,6 +13,21 @@ export function shouldClearDownloadSelectionOnEscape(tagName: string, inputType
|
|||||||
return ["checkbox", "radio", "button"].includes(inputType.toLowerCase());
|
return ["checkbox", "radio", "button"].includes(inputType.toLowerCase());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function resolveEscapeSelectionScope(
|
||||||
|
view: string,
|
||||||
|
settingsSection: string,
|
||||||
|
tagName: string,
|
||||||
|
inputType = ""
|
||||||
|
): "downloads" | "history" | "accounts" | null {
|
||||||
|
if (!shouldClearDownloadSelectionOnEscape(tagName, inputType)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (view === "downloads" || view === "history") {
|
||||||
|
return view;
|
||||||
|
}
|
||||||
|
return view === "settings" && settingsSection === "accounts" ? "accounts" : null;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Drop selected ids whose package OR item no longer exists in the session.
|
* Drop selected ids whose package OR item no longer exists in the session.
|
||||||
* The selection set mixes package and item ids; when entries vanish (delta
|
* The selection set mixes package and item ids; when entries vanish (delta
|
||||||
|
|||||||
@@ -108,7 +108,6 @@ export interface AccountWorkspaceViewModel {
|
|||||||
export interface AccountWorkspaceActions {
|
export interface AccountWorkspaceActions {
|
||||||
onPanelChange: (panel: AccountWorkspacePanel) => void;
|
onPanelChange: (panel: AccountWorkspacePanel) => void;
|
||||||
onSelect: (rowId: string, additive: boolean) => void;
|
onSelect: (rowId: string, additive: boolean) => void;
|
||||||
onClearSelection: () => void;
|
|
||||||
onToggleEnabled: (rowId: string) => void;
|
onToggleEnabled: (rowId: string) => void;
|
||||||
onEdit: (rowId: string) => void;
|
onEdit: (rowId: string) => void;
|
||||||
onContextMenu: (rowId: string, x: number, y: number) => void;
|
onContextMenu: (rowId: string, x: number, y: number) => void;
|
||||||
@@ -583,16 +582,7 @@ function AccountRules({ model, actions }: AccountWorkspaceProps): ReactElement {
|
|||||||
|
|
||||||
export function AccountWorkspace({ model, actions }: AccountWorkspaceProps): ReactElement {
|
export function AccountWorkspace({ model, actions }: AccountWorkspaceProps): ReactElement {
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="settings-account-workspace">
|
||||||
className="settings-account-workspace"
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key !== "Escape" || model.selectedIds.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
actions.onClearSelection();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{model.busy ? <span aria-live="polite" className="settings-visually-hidden" role="status">Accountdaten werden aktualisiert.</span> : null}
|
{model.busy ? <span aria-live="polite" className="settings-visually-hidden" role="status">Accountdaten werden aktualisiert.</span> : null}
|
||||||
{model.error ? <span className="settings-visually-hidden" role="alert">{model.error}</span> : null}
|
{model.error ? <span className="settings-visually-hidden" role="alert">{model.error}</span> : null}
|
||||||
<header className="settings-account-heading">
|
<header className="settings-account-heading">
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
import { describe, expect, it } from "vitest";
|
||||||
import { pruneSelection, shouldClearDownloadSelection, shouldClearDownloadSelectionOnEscape } from "../src/renderer/selection";
|
import { pruneSelection, shouldClearDownloadSelection, shouldClearDownloadSelectionOnEscape } from "../src/renderer/selection";
|
||||||
|
import * as selection from "../src/renderer/selection";
|
||||||
import type { SessionState } from "../src/shared/types";
|
import type { SessionState } from "../src/shared/types";
|
||||||
|
|
||||||
function session(packageIds: string[], itemIds: string[]): Pick<SessionState, "packages" | "items"> {
|
function session(packageIds: string[], itemIds: string[]): Pick<SessionState, "packages" | "items"> {
|
||||||
@@ -62,3 +63,17 @@ describe("download selection clearing", () => {
|
|||||||
expect(shouldClearDownloadSelectionOnEscape("TEXTAREA")).toBe(false);
|
expect(shouldClearDownloadSelectionOnEscape("TEXTAREA")).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("global Escape selection routing", () => {
|
||||||
|
it("routes Escape to the account selection even when focus is outside the account workspace", () => {
|
||||||
|
const api = selection as typeof selection & {
|
||||||
|
resolveEscapeSelectionScope?: (view: string, settingsSection: string, tagName: string, inputType?: string) => string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(api.resolveEscapeSelectionScope).toBeTypeOf("function");
|
||||||
|
expect(api.resolveEscapeSelectionScope?.("settings", "accounts", "BODY")).toBe("accounts");
|
||||||
|
expect(api.resolveEscapeSelectionScope?.("settings", "accounts", "INPUT", "text")).toBeNull();
|
||||||
|
expect(api.resolveEscapeSelectionScope?.("downloads", "allgemein", "DIV")).toBe("downloads");
|
||||||
|
expect(api.resolveEscapeSelectionScope?.("history", "accounts", "DIV")).toBe("history");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -301,7 +301,6 @@ function workspaceActions(overrides: Partial<AccountWorkspaceActions> = {}): Acc
|
|||||||
return {
|
return {
|
||||||
onPanelChange: () => {},
|
onPanelChange: () => {},
|
||||||
onSelect: () => {},
|
onSelect: () => {},
|
||||||
onClearSelection: () => {},
|
|
||||||
onToggleEnabled: () => {},
|
onToggleEnabled: () => {},
|
||||||
onEdit: () => {},
|
onEdit: () => {},
|
||||||
onContextMenu: () => {},
|
onContextMenu: () => {},
|
||||||
@@ -799,18 +798,15 @@ describe("account workspace", () => {
|
|||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows the selected account count and clears the selection with Escape", () => {
|
it("shows the selected account count", () => {
|
||||||
let cleared = 0;
|
|
||||||
const model = workspaceModel();
|
const model = workspaceModel();
|
||||||
const tree = AccountWorkspace({
|
const tree = AccountWorkspace({
|
||||||
actions: workspaceActions({ onClearSelection: () => { cleared += 1; } }),
|
actions: workspaceActions(),
|
||||||
model: { ...model, selectedIds: model.rows.slice(0, 3).map((row) => row.id) }
|
model: { ...model, selectedIds: model.rows.slice(0, 3).map((row) => row.id) }
|
||||||
});
|
});
|
||||||
const html = renderToStaticMarkup(tree);
|
const html = renderToStaticMarkup(tree);
|
||||||
|
|
||||||
expect(html).toContain("− Entfernen (3)");
|
expect(html).toContain("− Entfernen (3)");
|
||||||
tree.props.onKeyDown({ key: "Escape", preventDefault: () => {} });
|
|
||||||
expect(cleared).toBe(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("removes the redundant global account activation switch", () => {
|
it("removes the redundant global account activation switch", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user