fix(website): stop collection date range fields bouncing between values while typing

[theosanderson]

Relates to https://loculus.slack.com/archives/C05G172HL6L/p1781275386940369 - hard to reproduce the original issue to test but the new approach seems strictly better, and less code (apart from added tests)

Below written by AI

---

Problem

The Collection date From/To inputs (and any other field configured with rangeOverlapSearch) could intermittently bounce back and forth between two values while typing — a race condition reported during normal use of the search page.

Root cause

In the default Loculus config, collectionDate uses rangeOverlapSearch (kubernetes/loculus/values.yaml), so the "Collection date / From / To" box is rendered by DateRangeField.

DateRangeField kept its own lowerValue/upperValue state and synced it bidirectionally with the global fieldValues via two useEffects:

• write effect: local state → setSomeFieldValues → URL/query state → re-derived fieldValues
• read effect: fieldValues → setLowerValue/setUpperValue

fieldValues is recomputed from URL state on every change and lags one round-trip behind while typing (each keystroke goes through setSomeFieldValues + setPage(1) + a parent useMemo). When you type a second character before the first round-trip lands, the read effect fires with a stale fieldValues and resets the local state backward; the write effect then pushes that stale value back out — so the field ping-pongs between the freshly typed value and the lagging one. This is the classic two-effect mirror race.

This is a longstanding bug, not a regression from a recent change.

Fix

Make fieldValues the single source of truth:

• Remove the lowerValue/upperValue local state and both mirroring effects.
• Derive the displayed values directly from fieldValues.
• Write only on real user interaction via a commit(...) helper invoked from the date inputs' onChange and the strict-mode toggle — never from an effect, so there is no feedback loop.
• Keep a single effect that re-derives strictMode from the populated fields (guarded so toggling strictness with no dates entered doesn't snap back). It is a pure function of which fields exist and cannot oscillate against the writes.

No behavioural change to how dates map onto the four underlying Lower*/Upper* fields, or to strict/non-strict mode switching.

Tests

• Added a test asserting no write happens on mount (rendering must not push values back into query state).
• Rewrote the "updates query params" test to use a stateful wrapper that feeds values back through fieldValues (the old version passed only because the buggy local mirror accumulated edits without any feedback) and assert both edits are retained — i.e. neither value bounces back.
• All DateRangeField (12) and DateField (4) tests pass.

🤖 Generated with Claude Code

🚀 Preview: https://fix-date-range-field-boun.loculus.org

[anna-parker]

approving as this seems like an overall improvement and testing can be improved without further reviews