Skip to content

Tech: Focus controller for deterministic row navigation (Editor Mode) #66

@GitAddRemote

Description

@GitAddRemote

Epic: #58

Problem

React re-renders, sorting, grouping, and pagination can cause focus loss or jumps. Editor Mode requires deterministic, testable focus movement to mimic spreadsheet workflows.

Acceptance Criteria

  • Centralized focus controller for Editor Mode can:
    • Move focus Location → Quantity → Save → next row Location.
    • Target a specific row+field by stable row key.
    • Handle pagination boundary (last row save → first row next page) when possible without jank.
  • No focus jank when:
    • Rows re-render due to state/optimistic updates.
    • Sorting/grouping changes order (document expected behavior when order changes mid-edit).
  • Does not break screen reader or tab order; remains accessible.

Technical Notes

  • Provide an imperative API (e.g., registry mapping row keys to field refs) to request focus; keep registration/unregistration stable across renders.
  • Compute next target from the rendered order used by grouping/sorting/pagination; avoid stale indices.
  • Defer focus until after state updates where necessary (e.g., requestAnimationFrame/microtask) to prevent focusing unmounted elements.
  • Integrate with the save flow (Inventory Editor Mode: Per-row save without reload + saved indicator #63) to avoid focus loss during in-flight saves/spinners.
  • Expose hooks/utilities for tests to assert current focus target.

Definition of Done

  • Focus controller implemented and used by Editor Mode flows; ad-hoc ref juggling removed where possible.
  • Focus transitions are deterministic in personal + org views, including pagination edge cases or documented fallback.
  • A11y preserved (tab order and SR navigation still work).
  • Tests updated/passing to assert focus behavior; lint/typecheck/CI clean.

Metadata

Metadata

Assignees

Labels

accessibilityAccessibility (a11y), keyboard navigation, screen readerseditor-modeInventory editor mode / inline editingenhancementNew feature or requestfrontendFrontend app and dashboardinventoryInventory system featureskeyboardKeyboard-first interactionstech-storyTechnical implementation storyui-uxUser interface and experience

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions