fix(sort): harden shared sort primitives (R13 S1 review round 2)

- SortControl no longer renders a blank select when an always-sorted view
  (no defaultLabel) is handed a key its options don't offer: it falls back to
  the first option instead of value="" (which also tripped React's controlled
  warning). Robustness now lives in the primitive, not each caller.
- PLEX_SORT_FALLBACK is Object.frozen: it's handed out by reference from
  healSort/healPlexSort and stored as provider state, so freezing turns any
  accidental in-place SortState mutation into a loud error instead of silently
  corrupting the shared fallback.
- Test: SortControl falls back to the first option for an unavailable key.

Gate green: tsc/eslint(0 err)/prettier/knip clean, vitest 106.
This commit is contained in:
2026-08-14 00:10:13 +02:00
parent 02c8c71c53
commit ccd7170a20
3 changed files with 14 additions and 3 deletions
@@ -47,6 +47,11 @@ describe("SortControl", () => {
expect(none.value).toBe("");
});
it("falls back to the first option (not a blank select) for an unavailable key without defaultLabel", () => {
renderControl({ key: "ghost", dir: "asc" });
expect((screen.getByRole("combobox") as HTMLSelectElement).value).toBe("date");
});
it("picking a new option fires onChange at that option's defaultDir", () => {
const { onChange } = renderControl({ key: "title", dir: "asc" });
fireEvent.change(screen.getByRole("combobox"), { target: { value: "date" } });
+5 -1
View File
@@ -36,10 +36,14 @@ export default function SortControl({
const active = sort && options.some((o) => o.key === sort.key) ? sort : null;
const activeOpt = active ? options.find((o) => o.key === active.key) : undefined;
const showArrow = !!activeOpt && !activeOpt.directionless;
// An always-sorted view (no `defaultLabel`) must still show a real option when the current key isn't
// offered (a stale/out-of-scope sort) — fall back to the first option rather than a blank select
// (which also trips React's controlled-value warning). Views with a "no sort" option keep it.
const selectValue = active?.key ?? (defaultLabel === undefined ? (options[0]?.key ?? "") : "");
return (
<div className="flex items-center gap-1">
<select
value={active?.key ?? ""}
value={selectValue}
onChange={(e) => onChange(pickSort(options, active, e.target.value))}
aria-label={label}
className="bg-surface border border-border rounded-lg px-2 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"