oxidecomputer / oxidecomputer/console

Check spreading of `field` props on all Field components

Open
#2,372 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

tools
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 from field to Listbox. We are still missing onBlur and disabled, 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 of onBlur here 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.