While working on FocusYar, I found a bug when editing a Task without a priority.
I created a Task with only a title, so the database stored:
priority: null
Later, when I opened the edit form and left priority empty, I got:
There is nothing task
The problem
In my Zod schema, I was checking for undefined:
priority: z.preprocess(
(value) => (value === undefined ? "" : value),
z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).optional(),
),
Enter fullscreen mode Exit fullscreen mode
But the actual value coming from the database was null.
At first, I changed the condition to “”, but it didn’t solve the problem.
The solution
I checked the complete data flow:
UI → Database → Zod → Server Action
Then I found the same field in my edit schema and changed the check from undefined to null:
priority: z.preprocess(
(value) => (value === null ? "" : value),
z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).optional(),
),
Enter fullscreen mode Exit fullscreen mode
What I learned
When debugging optional fields, I should check the actual value at every layer.
undefined, null, and “” are not the same.
Sometimes the bug isn’t in the UI or database alone.
It can be caused by how the value moves between different layers of the application.