Unable to resize an image until you click/tab to another field first

[sion42x]

When trying to resize a stopped image, I changed the RAM value and tried to click Resize. The option was disabled. You can enable it by clicking on a different field, pressing tab, etc. but it should be able to work without that.

[benjaminleonard]

I'm guessing this is because number fields do not update the form value until they have been blurred. This is because a number field lets you type things like 1,000 and transform it once you've done with the field. https://react-aria.adobe.com/NumberField/useNumberField.html#controlled

That said the UX isn't great in this instance. Potentially we can use client-side validation on submit rather than just disabling the button.

[fakemonster]

To make an evil suggestion: we could autoblur the form when mousing over the submit button

A less-evil one: we could just ignore the active comparison while you're in the form. something like this

diff --git a/app/pages/project/instances/InstancePage.tsx b/app/pages/project/instances/InstancePage.tsx
index c8146cc8..170481da 100644
--- a/app/pages/project/instances/InstancePage.tsx
+++ b/app/pages/project/instances/InstancePage.tsx
@@ -279,6 +279,8 @@ export function ResizeInstanceModal({
   onDismiss: () => void
   onListView?: boolean
 }) {
+  const [isEditing, setIsEditing] = useState(false)
+
   const { project } = useProjectSelector()
   const instanceUpdate = useApiMutation(api.instanceUpdate, {
     onSuccess(_updatedInstance) {
@@ -313,7 +315,7 @@ export function ResizeInstanceModal({
   const canResize = instanceCan.resize(instance)
   const willChange =
     form.watch('ncpus') !== instance.ncpus || form.watch('memory') !== instance.memory / GiB
-  const isDisabled = !form.formState.isValid || !canResize || !willChange
+  const isDisabled = !form.formState.isValid || !canResize || (!isEditing && !willChange)
 
   const onSubmit = form.handleSubmit(({ ncpus, memory }) => {
     instanceUpdate.mutate({
@@ -349,7 +351,14 @@ export function ResizeInstanceModal({
               }
             />
           )}
-          <form id={formId} autoComplete="off" className="space-y-4" onSubmit={onSubmit}>
+          <form
+            id={formId}
+            autoComplete="off"
+            className="space-y-4"
+            onSubmit={onSubmit}
+            onFocus={() => setIsEditing(true)}
+            onBlur={() => setIsEditing(false)}
+          >
             <NumberField
               required
               label="vCPUs"

A little wacky though, since if you focus the form, make no changes, then try and click the submit button, it'll disable before the click transmits. Disorienting!

[askfongjojo]

See also #2647 - the suggested fix there sounds reasonable to me.

[fakemonster]

The suggestion there is in some sense what I'm describing above, which isn't great since it has to be applied form-by-form (and also it doesn't answer the equivalent bad experience of "input is invalid and you change it to a valid number", which also has the blurring problem). Looking around at how others attempt to make onChange a little more eager, I think I can directly get these number inputs better-behaved while only... barely reimplementing the internals of react-aria number fields.