Inline editing

Proposal · interactive prototype. This composition uses existing Cajón controls. It is ready for interaction review; it is not an exported library component.

Change a value without losing your place. The table stays readable while a compact choice menu expands from the selected cell. Priority, Owner and Status save on selection. Text and coupled numbers keep an explicit Save action.

Try itCopy Anchor Link

• Click the P2 circle to expand the priority choices. Select a circle to close and save.
• Click Owner or Status, then select an option to close and save. There is no form or Save button.
• Press Escape or click outside a choice menu to close without changing anything.
• Title, Effort and VU use Save/Cancel; clicking outside keeps those drafts open.
• Turn on Fail next save, then select an option. The original cell stays unchanged; retry the selection.
• Change the first row's effort: its manually entered VU asks you to keep it or use the size default.
• Turn on Read-only and compare the values. The archived row is always read-only.
• Use the page's theme picker and light/dark switch. Narrow the window to try the scrolling table.

All data and saves in this preview are simulated. Reloading restores the examples.

The interaction contractCopy Anchor Link

Read → editCopy Anchor Link

The resting cell shows its saved value. Priority is a compact circle containing its level, such as P2. It expands into a row of priority circles. Owner and Status open compact option lists. These choices have no form header, Save or Cancel buttons. Text and numeric fields show a subtle pencil on hover and keyboard focus. Empty editable values say Add owner, Set priority or Set effort. Read-only values have no edit affordance.

The entire value is a button with a field-and-row accessible name. Click, Enter or Space opens it. Choice menus focus the current selection; arrow keys move between options, Home/End move to the first/last, and Enter or Space selects. Escape, Tab, a second trigger click or clicking outside dismisses without a write.

Choose → close and saveCopy Anchor Link

Selecting Priority, Owner or Status closes the menu immediately and starts one save. The cell shows pending feedback while retaining the committed value until success. Selecting the already committed value simply closes with no write. Prevent duplicate requests while pending and announce progress. On success update the cell and return focus to its trigger. On failure retain the original cell, reopen the choices with an error, and offer Retry selection. The failed selection is preserved for retry; choosing another option replaces it. Dismissing a failed menu abandons that selection.

Text and numbers → save or cancelCopy Anchor Link

Title and coupled Effort/VU keep Save and Cancel because they need a draft, validation or a consequence check. Enter submits; Escape cancels. Tab moves between controls without committing. Clicking outside retains the draft. Freeze the draft while saving. On failure preserve it and offer Retry/Cancel.

Coupled values: effort and VUCopy Anchor Link

Effort and VU share one editor because effort can seed VU. Use the established mapping: XS → 4, S → 8, M → 24, L → 40, XL → 80, XXL → 160. If changing effort would replace a manual estimate, explain the exact consequence before saving. Offer Keep my VU and Use size default, then let the user Save. Do not silently reset VU, and do not save a numeric estimate just because focus moved.

Title is trimmed, required and limited to 300 characters. VU must be a finite, nonnegative number; zero is valid. Owner includes an explicit Unassigned choice. Priority includes No priority; priority does not change manual ordering. Status options represent allowed transitions, not the full status vocabulary.

Layout and accessibilityCopy Anchor Link

Compose DataTable, Input, Button and Badge. This preview uses nonmodal menus for direct choices and a native modal dialog for text/sizing. A production searchable owner picker must preserve selection-to-save and dismissal behavior.

The contextual editor overlays the page, so opening it does not resize rows or columns. Keep it inside the viewport; on a phone, give it at least 16px of margin and let the table scroll horizontally. Allow the editor body to scroll when needed. Provide touch targets of at least 44px. Preserve table semantics rather than adding spreadsheet grid keyboard behavior to a normal table.

Name menus and dialogs, expose checked choices and expanded triggers, label every input, associate field errors with their controls, announce async progress in a live region, and restore focus on close. Color alone must not convey editability, errors or saved state. Use semantic Cajón text, surface, border and focus tokens so the same interaction works across themes.

Applying the pattern to Harmonica laterCopy Anchor Link

The baseline is PR #4455: Owner and Status use explicit Save/Cancel; Priority saves a chosen option; Effort saves a size choice and VU saves on blur or Enter. This proposal gives them direct selection-to-save for Priority, Owner and Status, with explicit saving for text and coupled sizing values.

Before adoption, wire persistence to the existing permission-aware editor and status transition route. Keep sizing override confirmation and archived-item restrictions. Retain the title's detail-navigation action; add a distinct edit affordance where inline title editing is desired. A click on an editor must not toggle row selection, start dragging or open the detail panel.

Use stable item IDs as row keys. Same-scope refreshes must preserve unrelated drafts; when the edited item's server version changes, show a conflict and offer reload or reconciliation rather than silently overwriting. Treat permission loading as read-only, recheck write authorization on the server, and handle permission loss and unmounts during pending saves. Define a deliberate discard policy for scope/navigation changes.

These integration behaviors are requirements for later implementation; the local prototype does not exercise server conflicts, authorization or production data. Bulk edits, rich text, drag/selection, and drafts across navigation are outside this proposal. Review the editor placement, commit model and sizing confirmation here before extracting a shared component or changing Harmonica.