Working on getting it to work with an updated API; these API changes …

…will have to be reverted.

app/components/form/fields/ListboxField.tsx

@@ -35,6 +35,8 @@ export type ListboxFieldProps<
   onChange?: (value: string | null | undefined) => void
   isLoading?: boolean
   noItemsPlaceholder?: string
+  isClearable?: boolean
+  onClear?: () => void
 }
 
 export function ListboxField<
@@ -54,6 +56,8 @@ export function ListboxField<
   onChange,
   isLoading,
   noItemsPlaceholder,
+  isClearable,
+  onClear,
 }: ListboxFieldProps<TFieldValues, TName>) {
   // TODO: recreate this logic
   //   validate: (v) => (required && !v ? `${name} is required` : undefined),
@@ -82,6 +86,11 @@ export function ListboxField<
         buttonRef={field.ref}
       />
       <ErrorMessage error={fieldState.error} label={label} />
+      {isClearable && (
+        <button type="button" onClick={onClear}>
+          clear
+        </button>
+      )}
     </div>
   )
 }

app/forms/subnet-create.tsx

@@ -21,7 +21,7 @@ import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcSubnetCreate = {
   name: '',
-  customRouter: '',
+  customRouter: undefined,
   description: '',
   ipv4Block: '',
 }

app/forms/subnet-edit.tsx

@@ -60,6 +60,12 @@ export function EditSubnetForm() {
 
   const form = useForm({ defaultValues })
   const { isLoading, items } = useCustomRouterItems()
+  const customRouterValue = form.watch('customRouter')
+  const clearCustomRouter = () => {
+    // Because this is `undefined`, the dropdown isn't behaving correctly; it should revert to the placeholder
+    // It works when the value is '', but that's not a valid value for this field and it trips zod's validator
+    form.setValue('customRouter', undefined)
+  }
 
   return (
     <SideModalForm
@@ -71,7 +77,13 @@ export function EditSubnetForm() {
         updateSubnet.mutate({
           path: { subnet: subnet.name },
           query: { project, vpc },
-          body,
+          body: {
+            name: body.name,
+            description: body.description,
+            // this is currently failing because the API does not accept null for customRouter, but it should
+            // once that is fixed, this should allow clearing the customRouter
+            customRouter: body.customRouter,
+          },
         })
       }}
       loading={updateSubnet.isPending}
@@ -87,6 +99,8 @@ export function EditSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
+        isClearable={!!customRouterValue}
+        onClear={clearCustomRouter}
       />
     </SideModalForm>
   )

mock-api/msw/handlers.ts

@@ -1180,8 +1180,10 @@ export const handlers = makeHandlers({
     if (body.name) {
       subnet.name = body.name
     }
-    if (body.custom_router) {
+    if (body.custom_router !== undefined) {
       subnet.custom_router_id = body.custom_router
+    } else {
+      subnet.custom_router_id = null
     }
     updateDesc(subnet, body)