@byline/admin 6.2.1 → 6.3.0

package/src/fields/relation/relation-picker-create.test.tsx

@@ -0,0 +1,203 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+// base-ui's Modal portals into a floating layer jsdom cannot position, and the
+// contract under test is what the picker puts *into* the modal.
+vi.mock('@byline/ui/react', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  const Pass = ({ children }: any) => <div>{children}</div>
+  const Modal: any = ({ children, isOpen }: any) => (isOpen ? <div>{children}</div> : null)
+  Modal.Container = Pass
+  Modal.Header = Pass
+  Modal.Content = Pass
+  Modal.Actions = Pass
+  return {
+    ...actual,
+    Modal,
+    Search: ({ placeholder }: any) => <input aria-label="search" placeholder={placeholder} />,
+    LoaderRing: () => <span />,
+  }
+})
+
+import { BylineFieldServicesProvider } from '../field-services-context'
+import { RelationPicker } from './relation-picker'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'media',
+      labels: { singular: 'Media item', plural: 'Media' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const targetDefinition = {
+  path: 'media',
+  labels: { singular: 'Media item', plural: 'Media' },
+  fields: [{ name: 'title', label: 'Title', type: 'text' }],
+} as any
+
+const emptyList = async () => ({
+  docs: [],
+  meta: { totalPages: 1 },
+  included: { collection: { id: 'collection-1' } },
+})
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const render = async (services: Record<string, unknown>, props: Record<string, unknown> = {}) => {
+  await act(async () => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            { getCollectionDocuments: emptyList, uploadField: async () => ({}), ...services } as any
+          }
+        >
+          <RelationPicker
+            targetCollectionPath="media"
+            targetDefinition={targetDefinition}
+            displayField="title"
+            isOpen={true}
+            onSelect={() => {}}
+            onDismiss={() => {}}
+            {...(props as any)}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const createLink = () =>
+  container.querySelector<HTMLAnchorElement>('.byline-field-relation-picker-create')
+
+const bothCapabilities = {
+  canCreateInCollection: () => true,
+  getCreateDocumentUrl: (path: string) => `/control-panel/collections/${path}/create`,
+}
+
+describe('relation picker create affordance', () => {
+  it('is absent when the host wires no capabilities', async () => {
+    await render({})
+
+    expect(createLink()).toBeNull()
+  })
+
+  /**
+   * Permission is unknowable without `canCreateInCollection`, and offering a link
+   * that leads to a refusal is worse than offering none.
+   */
+  it('is absent when only the url capability is wired', async () => {
+    await render({ getCreateDocumentUrl: (path: string) => `/x/${path}/create` })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('is absent when only the permission capability is wired', async () => {
+    await render({ canCreateInCollection: () => true })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('is absent when the viewer may not create in the target collection', async () => {
+    await render({ ...bothCapabilities, canCreateInCollection: () => false })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('asks about the target collection, not some other one', async () => {
+    const canCreateInCollection = vi.fn(() => true)
+    await render({ ...bothCapabilities, canCreateInCollection })
+
+    expect(canCreateInCollection).toHaveBeenCalledWith('media')
+  })
+
+  it('renders the host-supplied url when permitted', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.getAttribute('href')).toBe('/control-panel/collections/media/create')
+  })
+
+  /**
+   * A new tab is the whole point: the parent editor and this picker stay mounted
+   * with their unsaved state. `noopener` because the opened page must not reach
+   * back into this one through `window.opener`.
+   */
+  it('opens in a new tab without handing over a window reference', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.getAttribute('target')).toBe('_blank')
+    expect(createLink()?.getAttribute('rel')).toContain('noopener')
+  })
+
+  it('names the target collection so the reader knows what they are creating', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.textContent).toContain('Media item')
+  })
+
+  /**
+   * An anchor rather than a button calling `window.open`: keyboard and
+   * middle-click work for free, and popup blockers leave it alone.
+   */
+  it('is a real link, reachable by keyboard', async () => {
+    await render(bothCapabilities)
+
+    const link = createLink()
+    expect(link?.tagName).toBe('A')
+    expect(link?.getAttribute('href')).toBeTruthy()
+  })
+
+  it('does not dismiss the picker when followed', async () => {
+    const onDismiss = vi.fn()
+    await render(bothCapabilities, { onDismiss })
+
+    act(() => {
+      createLink()?.click()
+    })
+
+    expect(onDismiss).not.toHaveBeenCalled()
+  })
+})

package/src/fields/relation/relation-picker-refresh.test.tsx

@@ -0,0 +1,325 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@byline/ui/react', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  const Pass = ({ children }: any) => <div>{children}</div>
+  const Modal: any = ({ children, isOpen }: any) => (isOpen ? <div>{children}</div> : null)
+  Modal.Container = Pass
+  Modal.Header = Pass
+  Modal.Content = Pass
+  Modal.Actions = Pass
+  return {
+    ...actual,
+    Modal,
+    Search: ({ onSearch }: any) => (
+      <input aria-label="search" onChange={(event) => onSearch?.(event.target.value)} />
+    ),
+    LoaderRing: () => <span />,
+  }
+})
+
+import { BylineFieldServicesProvider } from '../field-services-context'
+import { RelationPicker } from './relation-picker'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'media',
+      labels: { singular: 'Media item', plural: 'Media' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const targetDefinition = {
+  path: 'media',
+  labels: { singular: 'Media item', plural: 'Media' },
+  useAsTitle: 'title',
+  fields: [{ name: 'title', label: 'Title', type: 'text' }],
+} as any
+
+const page = (docs: Array<{ id: string; title: string }>) => ({
+  docs: docs.map(({ id, title }) => ({ id, fields: { title } })),
+  meta: { totalPages: 1 },
+  included: { collection: { id: 'collection-1' } },
+})
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const render = async (getCollectionDocuments: any, props: Record<string, unknown> = {}) => {
+  await act(async () => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={{ getCollectionDocuments, uploadField: async () => ({}) } as any}
+        >
+          <RelationPicker
+            targetCollectionPath="media"
+            targetDefinition={targetDefinition}
+            displayField="title"
+            isOpen={true}
+            onSelect={() => {}}
+            onDismiss={() => {}}
+            {...(props as any)}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const refreshButton = () =>
+  container.querySelector<HTMLButtonElement>('.byline-field-relation-picker-refresh')
+
+const rowText = () =>
+  Array.from(container.querySelectorAll('.byline-field-relation-picker-rows li')).map((node) =>
+    (node.textContent ?? '').trim()
+  )
+
+const search = async (value: string) => {
+  const input = container.querySelector<HTMLInputElement>('input[aria-label="search"]')
+  if (input == null) throw new Error('search input not found')
+  // React's `onChange` is an `input` listener, and assigning `.value` directly
+  // is swallowed by its value tracker — drive the native setter.
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+  await act(async () => {
+    setter?.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+/** The request argument of the most recent list call, failing loudly if absent. */
+const lastRequest = (mock: { mock: { calls: unknown[][] } }): any => {
+  const call = mock.mock.calls.at(-1)
+  if (call == null) throw new Error('no list request was made')
+  return call[0]
+}
+
+const clickRefresh = async () => {
+  await act(async () => {
+    refreshButton()?.click()
+  })
+}
+
+describe('relation picker refresh', () => {
+  it('re-runs the query and shows a document created since the picker opened', async () => {
+    let docs = [{ id: 'a', title: 'Apple' }]
+    const getCollectionDocuments = vi.fn(async () => page(docs))
+    await render(getCollectionDocuments)
+
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(true)
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(false)
+
+    // Stands in for the editor creating a document in the other tab.
+    docs = [
+      { id: 'a', title: 'Apple' },
+      { id: 'b', title: 'Banana' },
+    ]
+    await clickRefresh()
+
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(true)
+  })
+
+  /**
+   * The reader may have typed a search before leaving to create the document.
+   * Refresh must re-run *their* query, not reset to an unfiltered first page.
+   */
+  it('preserves the search term across a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () => page([{ id: 'a', title: 'Apple' }]))
+    await render(getCollectionDocuments)
+
+    await search('app')
+    const callsAfterSearch = getCollectionDocuments.mock.calls.length
+    await clickRefresh()
+
+    expect(getCollectionDocuments.mock.calls.length).toBeGreaterThan(callsAfterSearch)
+    const lastCall = lastRequest(getCollectionDocuments)
+    expect(lastCall.params.query).toBe('app')
+  })
+
+  it('preserves the current page across a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () => ({
+      docs: [{ id: 'a', fields: { title: 'Apple' } }],
+      meta: { totalPages: 3 },
+      included: { collection: { id: 'collection-1' } },
+    }))
+    await render(getCollectionDocuments)
+
+    const next = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Next'
+    )
+    if (next == null) throw new Error('Next button not found')
+    await act(async () => {
+      next.click()
+    })
+    expect(lastRequest(getCollectionDocuments).params.page).toBe(2)
+    await clickRefresh()
+
+    expect(lastRequest(getCollectionDocuments).params.page).toBe(2)
+  })
+
+  it('keeps a multi-select choice through a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () =>
+      page([
+        { id: 'a', title: 'Apple' },
+        { id: 'b', title: 'Banana' },
+      ])
+    )
+    const onSelectMany = vi.fn()
+    await render(getCollectionDocuments, { multiple: true, onSelectMany })
+
+    const firstChoice = container.querySelector<HTMLButtonElement>(
+      '.byline-field-relation-picker-rows li button'
+    )
+    if (firstChoice == null) throw new Error('First choice not found')
+    await act(async () => {
+      firstChoice.click()
+    })
+    expect(firstChoice.getAttribute('aria-pressed')).toBe('true')
+
+    await clickRefresh()
+
+    const selected = container.querySelectorAll('[aria-pressed="true"]')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]?.textContent).toContain('Apple')
+    const confirm = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Add selected (1)'
+    )
+    if (confirm == null) throw new Error('Selection confirmation not found')
+    await act(async () => {
+      confirm.click()
+    })
+    expect(onSelectMany).toHaveBeenCalledExactlyOnceWith([
+      {
+        targetDocumentId: 'a',
+        targetCollectionId: 'collection-1',
+        record: { id: 'a', fields: { title: 'Apple' } },
+      },
+    ])
+  })
+
+  it('keeps a single choice and confirms its refreshed record', async () => {
+    let title = 'Apple'
+    const getCollectionDocuments = vi.fn(async () => page([{ id: 'a', title }]))
+    const onSelect = vi.fn()
+    await render(getCollectionDocuments, { onSelect })
+
+    const choice = container.querySelector<HTMLButtonElement>(
+      '.byline-field-relation-picker-rows li button'
+    )
+    if (choice == null) throw new Error('Choice not found')
+    await act(async () => {
+      choice.click()
+    })
+    expect(choice.classList.contains('byline-field-relation-picker-row-selected')).toBe(true)
+
+    title = 'Updated Apple'
+    await clickRefresh()
+
+    const selected = container.querySelector('.byline-field-relation-picker-row-selected')
+    expect(selected?.textContent).toContain('Updated Apple')
+    const confirm = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Select'
+    )
+    if (confirm == null) throw new Error('Select button not found')
+    expect(confirm.disabled).toBe(false)
+    await act(async () => {
+      confirm.click()
+    })
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+      targetDocumentId: 'a',
+      targetCollectionId: 'collection-1',
+      record: { id: 'a', fields: { title: 'Updated Apple' } },
+    })
+  })
+
+  /**
+   * A refresh issued while an earlier request is still in flight must win, even
+   * if the earlier one resolves last. The fetch effect's `cancelled` cleanup
+   * gives this for free — but only because refresh re-runs the effect rather
+   * than calling the service imperatively, which would bypass it.
+   */
+  it('ignores a superseded request that resolves after the refresh', async () => {
+    const resolvers: Array<(value: unknown) => void> = []
+    const getCollectionDocuments = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          resolvers.push(resolve)
+        })
+    )
+    await render(getCollectionDocuments)
+
+    await clickRefresh()
+    expect(resolvers.length).toBeGreaterThanOrEqual(2)
+
+    // Resolve the newest first, then let the stale one land after it.
+    await act(async () => {
+      resolvers[resolvers.length - 1]?.(page([{ id: 'b', title: 'Banana' }]))
+    })
+    await act(async () => {
+      resolvers[0]?.(page([{ id: 'a', title: 'Apple' }]))
+    })
+
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(true)
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(false)
+  })
+
+  it('surfaces a refresh failure and recovers on a later refresh', async () => {
+    let shouldFail = false
+    const getCollectionDocuments = vi.fn(async () => {
+      if (shouldFail) throw new Error('network down')
+      return page([{ id: 'a', title: 'Apple' }])
+    })
+    await render(getCollectionDocuments)
+
+    shouldFail = true
+    await clickRefresh()
+    expect(container.querySelector('.byline-field-relation-picker-error')).not.toBeNull()
+
+    shouldFail = false
+    await clickRefresh()
+    expect(container.querySelector('.byline-field-relation-picker-error')).toBeNull()
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(true)
+  })
+})

package/src/fields/relation/relation-picker.module.css

@@ -25,6 +25,38 @@
 :global(.byline-field-relation-picker-header) {
   padding-top: 1rem;
   margin-bottom: var(--spacing-8);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+}
+
+/* Header actions: refresh, and the create link when the host permits it.
+   Stable override handle: `.byline-field-relation-picker-actions`. */
+.actions,
+:global(.byline-field-relation-picker-actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+/* Re-runs the current query. Stable override handle:
+   `.byline-field-relation-picker-refresh`. */
+.refresh,
+:global(.byline-field-relation-picker-refresh) {
+  white-space: nowrap;
+}
+
+/* Opens the target collection's create view in a new tab. Stable override
+   handle: `.byline-field-relation-picker-create`. */
+.create,
+:global(.byline-field-relation-picker-create) {
+  /* Rendered as an anchor so it behaves like a link, but it belongs to the
+     toolbar visually: drop the global anchor underline, and set no font size so
+     the button's own `xs` sizing governs rather than being overridden here. */
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 .title,

package/src/fields/relation/relation-picker.tsx

@@ -133,8 +133,24 @@ export const RelationPicker = ({
   const [documents, setDocuments] = useState<any[]>([])
   const [totalPages, setTotalPages] = useState<number>(1)
   const [collectionId, setCollectionId] = useState<string | null>(null)
+  // Refresh is a dependency of the fetch effect rather than an imperative
+  // refetch, so re-running it goes through the effect's `cancelled` cleanup
+  // below: a superseded request that resolves late is discarded instead of
+  // overwriting newer results. Calling the service directly would lose that.
+  const [refreshNonce, setRefreshNonce] = useState(0)
 
-  const { getCollectionDocuments } = useBylineFieldServices()
+  const { getCollectionDocuments, canCreateInCollection, getCreateDocumentUrl } =
+    useBylineFieldServices()
+
+  // Both capabilities are optional, and the affordance needs both: without
+  // `getCreateDocumentUrl` there is nowhere to send the reader, and without
+  // `canCreateInCollection` their permission is unknowable — offering a link that
+  // leads to a refusal is worse than offering none. The check is cosmetic; the
+  // create view enforces the ability server-side regardless.
+  const createHref =
+    getCreateDocumentUrl != null && canCreateInCollection?.(targetCollectionPath) === true
+      ? getCreateDocumentUrl(targetCollectionPath)
+      : null
 
   const targetAdminConfig: CollectionAdminConfig | null =
     getCollectionAdminConfig(targetCollectionPath)
@@ -152,6 +168,12 @@ export const RelationPicker = ({
   }, [isOpen])
 
   // Fetch whenever the modal is open and the query / page changes.
+  //
+  // `refreshNonce` is a re-run trigger rather than a value this effect reads, so
+  // the exhaustive-dependencies rule sees it as surplus. It is not: bumping it is
+  // how the refresh button re-runs the fetch, and routing refresh through the
+  // effect is what makes the `cancelled` cleanup discard a superseded request.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: see above
   useEffect(() => {
     if (!isOpen) return
     let cancelled = false
@@ -213,6 +235,7 @@ export const RelationPicker = ({
     getCollectionDocuments,
     t,
     targetAdminConfig?.itemViewSort,
+    refreshNonce,
   ])
 
   const resolvedDisplayField =
@@ -264,6 +287,41 @@ export const RelationPicker = ({
       <Modal.Container style={{ maxWidth: '600px', width: '100%' }}>
         <Modal.Header className={cx('byline-field-relation-picker-header', styles.header)}>
           <h3 className={cx('byline-field-relation-picker-title', styles.title)}>{title}</h3>
+          <div className={cx('byline-field-relation-picker-actions', styles.actions)}>
+            {/* Deliberately not disabled while loading: a request that never
+                settles must not leave the reader unable to retry, and a refresh
+                issued mid-flight supersedes the earlier one rather than racing
+                it. */}
+            <Button
+              type="button"
+              size="xs"
+              variant="outlined"
+              className={cx('byline-field-relation-picker-refresh', styles.refresh)}
+              onClick={() => setRefreshNonce((nonce) => nonce + 1)}
+            >
+              {t('fields.relation.picker.refresh')}
+            </Button>
+            {createHref != null && (
+              // Rendered as an anchor, styled as a button: keyboard activation and
+              // middle-click work without help and popup blockers leave real links
+              // alone, while `Button`'s `render` prop keeps it visually part of the
+              // toolbar. A new tab keeps this picker and the parent editor mounted,
+              // so unsaved work survives — the whole point of the affordance.
+              // `noopener` keeps the opened page out of `window.opener`.
+              <Button
+                size="xs"
+                variant="outlined"
+                className={cx('byline-field-relation-picker-create', styles.create)}
+                render={
+                  <a href={createHref} target="_blank" rel="noopener noreferrer">
+                    {t('fields.relation.picker.createNew', {
+                      label: targetDefinition?.labels.singular ?? targetCollectionPath,
+                    })}
+                  </a>
+                }
+              />
+            )}
+          </div>
         </Modal.Header>
         <Modal.Content>
           <div className={cx('byline-field-relation-picker-body', styles.body)}>

package/src/fields/select/select-field.tsx

@@ -11,6 +11,7 @@ import { ErrorText, Label, Select } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import styles from './select-field.module.css'
 
 export const SelectField = ({
@@ -33,7 +34,7 @@ export const SelectField = ({
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
 
   return (
     <div className={`byline-field-select ${field.name}`}>
@@ -62,7 +63,7 @@ export const SelectField = ({
         }}
         className={cx(isDirty && ['byline-field-select-dirty', styles.dirty])}
       />
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
     </div>
   )
 }