Clearing due date in task detail modal doesn't clear the visible date/time field

[gaidheal1]

Summary

In the task detail modal, clicking "Clear" next to the due date correctly submits the update (sets due_at: null on the server), but the datetime-local input itself keeps showing the old date/time until something else causes it to remount.

Where the bug is

frontend/src/components/TasksPanel/TasksPanel.tsx:160-181:

<input
  id="task-due-at"
  type="datetime-local"
  className={styles.dueDateInput}
  defaultValue={toDatetimeLocalValue(taskItem.due_at)}
  onBlur={(event) =>
    updateTask.mutate({
      id: taskItem.id,
      data: { due_at: fromDatetimeLocalValue(event.target.value) },
    })
  }
/>
{taskItem.due_at && (
  <Button
    variant="secondary"
    onClick={() =>
      updateTask.mutate({ id: taskItem.id, data: { due_at: null } })
    }
  >
    Clear
  </Button>
)}

The input is uncontrolled (defaultValue instead of value), so React only applies toDatetimeLocalValue(taskItem.due_at) on initial mount. When "Clear" fires updateTask.mutate(...) and taskItem.due_at later becomes null from the refetched data, the defaultValue prop changing has no effect on the already-mounted DOM input — the field keeps displaying the stale date until the modal happens to unmount/remount (e.g. closing and reopening it).

Expected behavior

Clicking "Clear" should immediately blank out the visible date/time field, in sync with the underlying value being cleared.

Suggested fix

Convert the input to controlled (value={toDatetimeLocalValue(taskItem.due_at)} synced via local state, or driven directly by taskItem.due_at if that's already kept fresh after the mutation), so the DOM reflects the current due_at on every render — including right after "Clear" is clicked — not just at mount time.

Worth double-checking the existing onBlur commit-on-blur behavior still works cleanly once the input is controlled (i.e. typing/editing shouldn't fight with the controlled value while unfocused edits are pending).

Scope

Small, self-contained, one component — good first issue.

[mhmdwaelanwr]

Hi! I'd like to work on this issue. I can update the datetime input to make it controlled while preserving the current onBlur behavior, and I’ll verify that clearing and editing the due date both work correctly. Could you assign this issue to me?

[gaidheal1]

Hi Mohamed @mhmdwaelanwr, thanks for asking! I'll assign this issue to you now. Let me know if you're up for working on more issues like this in the future!