oxidecomputer / oxidecomputer/console
Check spreading of `field` props on all Field components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 228
- Forks
- 22
- Avg merge
- 19h 42m
- Merged PRs (30d)
- 32
Description
We should check each of the *Field components in app/components/form/fields to see how we're passing the props from useController. There was one case (see below) where we were missing ref, that was very important for focusing the field on validation error. But even in cases that don't appear broken right now, failing to pass onBlur or disabled could mean things don't work the way we expect in the future. See #1895, where we hope to use a top-level disabled prop on the form to disable all fields instead of doing it manually one by one.
Something I noticed while looking at this is that even after adding
ref, we are not giving all the props fromfieldtoListbox. We are still missingonBluranddisabled, both of which could become more UX-relevant in the future. For example, if we change a form from the RHF default of validating on submit to validating on blur, the lack ofonBlurhere will be a problem. Similarly, if we do #1895, I think the lack of disabled here will be a problem. We can fix it here, but I'm guessing there are a bunch more cases like this.
Originally posted in https://github.com/oxidecomputer/console/pull/2364#discussion_r1714257202
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in app/components/form/fields and inspect each *Field component where useController provides field props, including the Listbox case mentioned in the issue. Compare the props passed to each underlying control, especially ref, onBlur, and disabled. Done means every relevant Field component forwards the needed field props consistently; run the affected form tests if available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100