fix: persist Select dropdown value and reset form after contribution submit - #6
fix: persist Select dropdown value and reset form after contribution submit#6lb1192176991-lab wants to merge 1 commit into
Conversation
…ntribution submission
Bug 1 — Select dropdown value not persisted:
The shadcn Select component's value prop received undefined initially,
causing uncontrolled/controlled mismatch. The onChange synthetic event
wrapper also introduced unnecessary indirection. Fixed by:
- Passing value={formData[...]?.value ?? ''} so the Select is always controlled
- Calling setFormData directly in onValueChange instead of routing through
the generic handleChange helper with a synthetic event
Bug 2 — Form not resetting after submit:
Native HTMLFormElement.reset() does not clear controlled components like
shadcn Select. Fixed by:
- Replacing formRef.reset() with a formKey counter that increments on
successful submission, forcing the FormGenerator to remount with clean
state
- Removing the 3-second setTimeout delay before reset
|
@lb1192176991-lab is attempting to deploy a commit to the MAY55A's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@lb1192176991-lab, thanks for your contribution! I really appreciate your work. I've recently introduced a Could you please update this pull request so that its base branch is |
|
@MAY55A Done! Changed the base branch from |
There was a problem hiding this comment.
@lb1192176991-lab, thank you for your effort !
These are the remarks I made while reviewing your PR:
-
The changes in the
"form-generator.tsx"file should be reverted, because they allow empty values for required Select fields. -
Changes in
"task-fields.tsx", however, fixed the issue partially (the submit button needs to be reset as well after every submission, it currently is enabled even with the check box not checked). -
Apparently, fixing the reset issue also fixes the
undefinedselect value as well, so no need to modify any code in"form-generator.tsx".
Would really appreciate trying to fix the remaining problem, to close this issue once and for all !
| } as React.ChangeEvent<HTMLInputElement>)} | ||
| value={formData[field.label]?.value} | ||
| setFormData((prev: { [key: string]: any }) => ({ ...prev, [field.label]: { value: selectedOption } }))} | ||
| value={formData[field.label]?.value ?? ""} |
There was a problem hiding this comment.
This allows empty values for required Select fields.
2 participants
What
Two bugs in the contribution form:
Why
Bug 1: The Select value prop used optional chaining which returned undefined on first render. Radix UI Select cannot switch from uncontrolled to controlled.
Bug 2: formRef.current.reset() only affects native DOM form elements. React-controlled components like shadcn Select retain their internal state after reset().
Testing