instance create: focus image field on validation error

[david-crespo]

Closes #2345

RHF automatically focuses the first field with an error, but we were not passing the ref for the image select listbox through to the button. And it must be the button specifically because the wrapping divs are not focusable unless they have a tabindex.

2024-08-12-focus-image-field.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Aug 12, 2024 7:10pm

[david-crespo]

WHAT ARE YOU EVEN TALKING ABOUT

Can't repro locally. Maybe this is that thing where GH actions randomly pull in data from another branch?

[david-crespo]

Ok, whew. I was able to repro locally after rm -rf node_modules. It has to do with not being able to do generics with forwardRef in a nice way.

[david-crespo]

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.