Which approach best manages DOM focus transitions in Reagent without bypassing the virtual DOM?

Answer to the Question

The most reliable way to move focus in a Reagent app without breaking the virtual‑DOM contract is to attach a :ref to the target element, store that DOM node in local state, and call .focus() inside reagent.core/next-tick. There is no built‑in declarative wrapper in Reagent 1.11+; the pattern above is the standard practice.

Why This Works

• :ref gives you a stable pointer to the real DOM node after React has finished rendering.
• next-tick defers the call until the reconciliation phase is complete, guaranteeing the node is present.
• All logic stays inside the Reagent component tree, so the application state remains the single source of truth.

Implementation Steps

1. Define a local atom or component state to hold the node:

   (defn modal-header []
     (let [node (reagent/atom nil)]
       (fn []
         [:h2 {:ref (fn [el] (reset! node el))} "Modal Title"]))
   

2. After mounting or when the focus target changes, schedule focus:

   (reagent/next-tick
     (fn []
       (when @node
         (.focus @node))))
   

3. Cleanup on unmount: if you store a cancellation token, clear it in reagent.core/use-effect or the component’s :component-did-mount hook.

Returning Focus to the Trigger

When a modal closes, store a reference to the element that opened it (e.g., the button). On unmount, schedule a focus back to that element using the same next-tick pattern.

Verification Checklist

• Open the page and confirm the header receives focus automatically.
• Use DevTools to log the node inside next-tick; it should be a real DOM element, not null.
• Trigger a rapid open/close cycle and verify no stale focus is applied.

Diagnostic Question

Do you need to return focus to a specific trigger element after the modal closes, or is the focus simply moved to the next logical element?