@byline/admin 6.2.0 → 6.3.0

package/src/forms/form-renderer-submit.test.tsx

@@ -211,6 +211,46 @@ describe('FormRenderer submit contract', () => {
     expect(saveButton?.querySelector('.byline-loader-ellipsis')).toBeNull()
   })
 
+  it('restores focus to the control that had it before the form went busy', async () => {
+    // `inert` drops the active control out of the tab order mid-save. The hook
+    // signals the transition through onBeforeBusy; the component owns the DOM
+    // refs. Drop that signal and focus silently lands on <body>.
+    //
+    // This covers the KEYBOARD path only: focus is in a field and the form is
+    // submitted from there, so the captured element is still focusable when the
+    // form comes back. Clicking Save is different -- the captured element is the
+    // Save button, which is disabled once the save succeeds -- and that path is
+    // broken in a real browser. See issue #98. Do not read this passing test as
+    // "focus recovery works" in general.
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+
+    const input = container.querySelector<HTMLInputElement>('input[name="title"]')
+    if (input == null) throw new Error('title input not found')
+    act(() => {
+      input.focus()
+    })
+    expect(document.activeElement).toBe(input)
+
+    submitForm()
+    await act(async () => {})
+
+    // jsdom does not implement `inert`, so the browser's own focus removal has
+    // to be stood in for here. What is under test is the recovery afterwards.
+    act(() => {
+      input.blur()
+    })
+    expect(document.activeElement).not.toBe(input)
+
+    await act(async () => {
+      submission.resolve()
+      await submission.promise
+    })
+
+    expect(document.activeElement).toBe(input)
+  })
+
   it('hides the busy indicator when onSubmit rejects', async () => {
     const submission = deferred()
     render({ ...baseProps, onSubmit: () => submission.promise })

package/src/forms/form-renderer-tab-persistence.test.tsx

@@ -0,0 +1,145 @@
+/**
+ * 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 } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+import { FormRenderer } from './form-renderer'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en', 'fr'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fields = [
+  { name: 'title', label: 'Title', type: 'text' as const },
+  { name: 'seoTitle', label: 'SEO title', type: 'text' as const },
+]
+
+const adminConfig = {
+  layout: { main: ['content'] },
+  tabSets: [
+    {
+      name: 'content',
+      tabs: [
+        { name: 'general', label: 'General', fields: ['title'] },
+        { name: 'seo', label: 'SEO', fields: ['seoTitle'] },
+      ],
+    },
+  ],
+}
+
+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 mount = (locale: string, versionId: string) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            {
+              getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+              uploadField: async () => ({}),
+            } as any
+          }
+        >
+          <FormRenderer
+            mode="edit"
+            fields={fields as any}
+            initialLocale={locale}
+            initialData={{
+              id: 'doc1',
+              versionId,
+              fields: { title: locale, seoTitle: `${locale} SEO` },
+            }}
+            adminConfig={adminConfig as any}
+            collectionPath="pages"
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const selectedTabLabel = () =>
+  container.querySelector('[role="tab"][aria-selected="true"]')?.textContent
+
+describe('FormRenderer tab persistence across keyed remounts', () => {
+  // FormProvider is keyed on `${initialLocale}-${versionId}`, so changing either
+  // remounts the whole subtree. Tab selection is lifted above that key on
+  // purpose; this asserts the wiring, which a controlled-prop test on
+  // FormLayout alone cannot reach.
+  //
+  // Adopted from the reviewer's Checkpoint 2 regression fixture.
+  it('retains the selected tab through locale and version remounts', () => {
+    mount('en', 'v1')
+
+    const seoTab = [...container.querySelectorAll('[role="tab"]')].find(
+      (t) => t.textContent === 'SEO'
+    )
+    if (seoTab == null) throw new Error('SEO tab not found')
+    act(() => {
+      ;(seoTab as HTMLElement).click()
+    })
+    const first = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(first).not.toBeNull()
+
+    mount('fr', 'v1') // locale change remounts FormProvider via its key
+    const french = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(french).not.toBeNull()
+    expect(french).not.toBe(first)
+    expect(french?.value).toBe('fr SEO')
+    expect(selectedTabLabel()).toBe('SEO')
+
+    mount('fr', 'v2') // version change remounts it again
+    const versioned = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(versioned).not.toBeNull()
+    expect(versioned).not.toBe(french)
+    expect(selectedTabLabel()).toBe('SEO')
+  })
+})

package/src/forms/form-renderer.module.css

@@ -304,6 +304,24 @@
   }
 }
 
+/* One column at every width. The split layout above becomes a two-column grid
+   at >=60rem; a stacked form must not inherit that, or it reserves an empty
+   second track and narrows its only content column. */
+.layout-stacked,
+:global(.byline-form-layout-stacked) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-32);
+}
+
+@media (min-width: 60rem) {
+  .layout-stacked,
+  :global(.byline-form-layout-stacked) {
+    gap: var(--spacing-32);
+  }
+}
+
 .content,
 :global(.byline-form-content) {
   display: flex;