diff --git a/app/(main)/admin/_pages/_jmap-servers-section.tsx b/app/(main)/admin/_pages/_jmap-servers-section.tsx index 0e6637b97..8622c146d 100644 --- a/app/(main)/admin/_pages/_jmap-servers-section.tsx +++ b/app/(main)/admin/_pages/_jmap-servers-section.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useId, useRef, useState } from 'react'; import { Plus, Trash2, ChevronDown, ChevronRight } from '@/components/icons'; import type { JmapServerEntry } from '@/lib/admin/jmap-servers'; import { Button } from '@/components/ui/button'; @@ -101,6 +101,9 @@ const fieldClass = cn(inputClass, 'w-full'); export function JmapServersSection({ value, source, onChange, onRevert }: Props) { const [drafts, setDrafts] = useState(() => value.map(entryToDraft)); + // Ids that tie each row's labels to its fields. + const idBase = useId(); + const labelFor = (row: number) => (key: string) => `${idBase}-${row}-${key}`; const lastEmittedRef = useRef(value); useEffect(() => { @@ -166,8 +169,9 @@ export function JmapServersSection({ value, source, onChange, onRevert }: Props)
- + update(i, { id: e.target.value })} @@ -177,8 +181,9 @@ export function JmapServersSection({ value, source, onChange, onRevert }: Props) {isDuplicate &&

Duplicate id

}
- + update(i, { label: e.target.value })} @@ -187,9 +192,10 @@ export function JmapServersSection({ value, source, onChange, onRevert }: Props) />
- +
update(i, { url: e.target.value })} @@ -209,10 +215,11 @@ export function JmapServersSection({ value, source, onChange, onRevert }: Props)
-