Pennywise

2 min read

Fix record page quick-entry rows and focus flow

Summary

Fixed Add subscription and Add row on the record page, which created nothing because the API rejects an empty category. They now open a local draft row that is created once it has a name, and the amount typed before pressing Enter is saved with it. After a save in Daily, Income, the draft rows and Quick add, the amount clears and the cursor returns to the name field. The native calendar icon is hidden on table date cells. Checked in the browser on the Daily table, Subscriptions and Quick add; Income was not exercised in the browser. Opened as PR 27.

Decisions

  • Draft rows stay open after saving so entries can be added back to back; Esc or the X closes them and the add button is disabled while one is open
  • Hide the calendar icon by making the native picker indicator transparent and stretching it over the whole field, so clicking the date still opens the picker
  • Create the transaction only once a name is entered instead of loosening the backend rule on empty categories

Learnings

  • The amount input keeps its own local text and reports it again on blur, so moving focus right after a save can restore the cleared value; remounting it with a changing key and clearing the amount once more before refocusing fixes it
  • Enter handlers must use the amount passed by the input’s commit callback, because the component state has not updated yet in that tick
  • Typing into the page right after navigation can be lost before it finishes loading, which made an early browser test look like a failure