feat(forms): add FormField wrapper, keyboard-only focus ring, and DateInput for date of birth#167
Open
stacelKonrad wants to merge 3 commits into
Open
feat(forms): add FormField wrapper, keyboard-only focus ring, and DateInput for date of birth#167stacelKonrad wants to merge 3 commits into
stacelKonrad wants to merge 3 commits into
Conversation
stacelKonrad
commented
May 27, 2026
stacelKonrad
commented
Collaborator
- Extract FormField component that encapsulates Controller + Field + FieldError and pre-computes validationState, eliminating ~25 repetitive ternaries across 8 form files
- Replace TextInput type="date" with DateInput (IMask masked input) to fix broken native date picker on Safari
- Add keyboard-only focus ring to TextInput using pointer tracking — ring appears on Tab navigation but not on mouse click
…eInput for date of birth - Extract FormField component that encapsulates Controller + Field + FieldError and pre-computes validationState, eliminating ~25 repetitive ternaries across 8 form files - Replace TextInput type="date" with DateInput (IMask masked input) to fix broken native date picker on Safari - Add keyboard-only focus ring to TextInput using pointer tracking — ring appears on Tab navigation but not on mouse click
10 tasks
mstarzak
reviewed
Jun 2, 2026
- DateInput now emits ISO (YYYY-MM-DD) on complete input and accepts ISO values as controlled input, fixing z.iso.date() validation failures - Add mode: 'onTouched' to all 8 forms so fieldState.invalid is reliable before first submit - Guard FormField valid state with isTouched to prevent green styling while the user is still typing in an unblurred field
mstarzak
reviewed
Jun 10, 2026
mstarzak
reviewed
Jun 15, 2026
Comment on lines
+104
to
+106
| <div | ||
| className='relative w-full' | ||
| onPointerDown={handlePointerDown} |
Collaborator
There was a problem hiding this comment.
Attaching onPointerDown to the wrapper sets isPointerFocus.current even when a focusable child is clicked and the input itself never receives focus. This breaks keyboard focus handling for PasswordInput and similar inputs with interactive adornments: after clicking the visibility toggle, returning to the field with Shift+Tab or Tab causes handleFocus to suppress data-keyboard-focus, so the keyboard focus ring no longer appears. Since the flag is only cleared in the input's focus handler, pointer-focus tracking should stay off non-input descendants.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.