Skip to content

Fix form submit wiring in a few modals #3421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
david-crespo merged 3 commits into from
Nov 2, 2026
Merged

Fix form submit wiring in a few modals #3421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8645014
Fix Enter on floating IP picker creating instance
david-crespo Oct 22, 2026
7078914
Hook up Link silo and Link pool modal submit buttons
david-crespo Oct 22, 2026
8e3a5e8
Hook up subnet pool link modal submit buttons
david-crespo Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions app/forms/instance-create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1053,23 +1053,24 @@ const NetworkingSection = ({
<Modal.Body>
<Modal.Section>
<Message variant="info" content={selectedFloatingIpMessage} />
<form>
<Listbox
name="floatingIp"
items={availableFloatingIps.map((i) => ({
value: i.name,
label: <FloatingIpLabel ip={i} />,
selectedLabel: `${i.name} (${i.ip})`,
}))}
label="Floating IP"
onChange={(name) => {
setSelectedFloatingIp(availableFloatingIps.find((i) => i.name === name))
}}
required
placeholder="Select a floating IP"
selected={selectedFloatingIp?.name || ''}
/>
</form>
{/* No <form> here: this modal is inside the instance create form in
the React tree, so a submit event would bubble through the portal
and submit the whole instance create form */}
<Listbox
name="floatingIp"
items={availableFloatingIps.map((i) => ({
value: i.name,
label: <FloatingIpLabel ip={i} />,
selectedLabel: `${i.name} (${i.ip})`,
}))}
label="Floating IP"
onChange={(name) => {
setSelectedFloatingIp(availableFloatingIps.find((i) => i.name === name))
}}
required
placeholder="Select a floating IP"
selected={selectedFloatingIp?.name || ''}
/>
</Modal.Section>
</Modal.Body>
<Modal.Footer
Expand Down
6 changes: 4 additions & 2 deletions app/pages/system/networking/IpPoolPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useId, useMemo, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'
import { Outlet, useNavigate } from 'react-router'

Expand Down Expand Up @@ -484,6 +484,7 @@ const toSiloComboboxItem = ({ name, description }: Silo): ComboboxItem => ({
})

function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
const formId = useId()
const { pool } = useIpPoolSelector()
const { data: poolData } = usePrefetchedQuery(ipPoolView({ pool }))
const { control, handleSubmit } = useForm({ defaultValues })
Expand Down Expand Up @@ -545,6 +546,7 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
<Modal.Body>
<Modal.Section>
<form
id={formId}
autoComplete="off"
onSubmit={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -580,7 +582,7 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
</Modal.Body>
<Modal.Footer
onDismiss={onDismiss}
onAction={handleSubmit(onSubmit)}
formId={formId}
actionLoading={isPending}
actionText="Link"
/>
Expand Down
6 changes: 4 additions & 2 deletions app/pages/system/networking/SubnetPoolPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useId, useMemo, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'
import { Outlet, useNavigate } from 'react-router'

Expand Down Expand Up @@ -469,6 +469,7 @@ const toSiloComboboxItem = ({ name, description }: Silo): ComboboxItem => ({
})

function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
const formId = useId()
const poolSelector = useSubnetPoolSelector()
const { subnetPool } = poolSelector
const { data: poolData } = usePrefetchedQuery(subnetPoolView(poolSelector))
Expand Down Expand Up @@ -530,6 +531,7 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
<Modal.Body>
<Modal.Section>
<form
id={formId}
autoComplete="off"
onSubmit={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -565,7 +567,7 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
</Modal.Body>
<Modal.Footer
onDismiss={onDismiss}
onAction={handleSubmit(onSubmit)}
formId={formId}
actionLoading={isPending}
actionText="Link"
/>
Expand Down
6 changes: 4 additions & 2 deletions app/pages/system/silos/SiloIpPoolsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useId, useMemo, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'

import {
Expand Down Expand Up @@ -284,6 +284,7 @@ type LinkPoolFormValues = {
const defaultValues: LinkPoolFormValues = { pool: undefined, isDefault: false }

function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
const formId = useId()
const { silo } = useSiloSelector()
const { control, handleSubmit } = useForm({ defaultValues })

Expand Down Expand Up @@ -338,6 +339,7 @@ function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
<Modal.Body>
<Modal.Section>
<form
id={formId}
autoComplete="off"
onSubmit={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -375,7 +377,7 @@ function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
</Modal.Body>
<Modal.Footer
onDismiss={onDismiss}
onAction={handleSubmit(onSubmit)}
formId={formId}
actionText="Link"
actionLoading={isPending}
/>
Expand Down
6 changes: 4 additions & 2 deletions app/pages/system/silos/SiloSubnetPoolsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useId, useMemo, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'

import {
Expand Down Expand Up @@ -271,6 +271,7 @@ type LinkPoolFormValues = {
const defaultValues: LinkPoolFormValues = { pool: undefined, isDefault: false }

function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
const formId = useId()
const { silo } = useSiloSelector()
const { control, handleSubmit } = useForm({ defaultValues })

Expand Down Expand Up @@ -319,6 +320,7 @@ function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
<Modal.Body>
<Modal.Section>
<form
id={formId}
autoComplete="off"
onSubmit={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -356,7 +358,7 @@ function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
</Modal.Body>
<Modal.Footer
onDismiss={onDismiss}
onAction={handleSubmit(onSubmit)}
formId={formId}
actionText="Link"
actionLoading={isPending}
/>
Expand Down
Loading