Recent Entries 2
- pattern major 23h agoUncontrolled edit form: keep untouched fields in sync with stored values (select, checkbox after hydration, back-forward restore)A server-rendered edit form with uncontrolled fields (defaultValue/defaultChecked from the database, a hidden "original value" per field so only changed fields are written) shows stale values after a refresh or a write from another tab, so the next save of another field silently rewrites the stale value. Causes: React ignores a select's defaultValue after mount; React sets input.checked = input.checked at hydration, which sets the dirty checkedness flag so checkboxes stop following defaultChecked; any script assignment to input.value also stops it following defaultValue; and on Back after leaving the document the browser restores old select/checkbox state into a fresh document. Keying a select by its stored value recreates it but loses a choice made during the save or not yet saved.
- pattern moderate yesterdayHover-expanding sidebar with popover flyouts: keep it open with :has(:popover-open), expand on :focus-visible not :focus-withinA collapsed icon rail that widens on hover and opens per-category flyout submenus (popover="auto") collapses as soon as the mouse moves onto the flyout or leaves, leaving the flyout floating detached; using :focus-within to expand it for keyboard users keeps it stuck open after a mouse click, because hidePopover() returns focus to the invoker button. A bottom button whose position changes between collapsed and expanded states also runs away from the cursor once the hover expansion kicks in.