fix(ui): a late form takes a dialog's focus once, even if it arrived elsewhere

The watch stayed armed when the form arrived while the focus was off the close button, so a
later change in the body pulled the focus off a close button the user went back to. It now
disarms on arrival and re-arms only when the focus is taken away.

frontend/src/components/ui/Modal.purpose.dom.test.tsx

@@ -116,6 +116,28 @@ describe("Modal initial focus by purpose (C4)", () => {
     expect(document.activeElement).toBe(cancel);
   });
 
+  // …and it stays the user's: the form disarms the watch when it arrives, so a later change in the
+  // body (a hint appearing as they type) cannot pull the focus off a ✕ they went back to.
+  it("field that loads late: once arrived, it never takes the focus off the ✕ again", async () => {
+    const view = (ready: boolean, hint = false) => (
+      <Modal initialFocus="field" title="t" onClose={() => {}}>
+        <Late ready={ready} />
+        {hint && <p>hint</p>}
+        <ModalFooter>
+          <button>cancel</button>
+        </ModalFooter>
+      </Modal>
+    );
+    const { rerender } = render(view(false));
+    act(() => screen.getByRole("button", { name: "cancel" }).focus());
+    rerender(view(true));
+    await act(async () => {});
+    act(() => closeBtn().focus());
+    rerender(view(true, true));
+    await act(async () => {});
+    expect(document.activeElement).toBe(closeBtn());
+  });
+
   it("close: the ✕, even with a field in the body", () => {
     render(
       <Modal initialFocus="close" title="t" onClose={() => {}}>