Tabs field crashes when stored tabIndex preference exceeds tab count

[OrellBuehler]

Describe the Bug

The TabsFieldComponent in @payloadcms/ui crashes with Cannot read properties of undefined (reading 'admin') when a user's stored tab preference (tabIndex) exceeds the number of tabs in the current collection config.

In @payloadcms/ui/dist/fields/Tabs/index.js, line 111:

const activeTabInfo = tabStates[activeTabIndex];
const activeTabConfig = activeTabInfo?.tab;
const activeTabDescription = activeTabConfig.admin?.description ?? activeTabConfig.description;
//                           ^^^^^^^^^^^ can be undefined, missing ?. operator

activeTabConfig is correctly null-guarded when derived from activeTabInfo?.tab, but then accessed without a null check on the next line. When activeTabIndex is out of bounds (from a stale preference), activeTabConfig is undefined and activeTabConfig.admin throws.

How stale preferences occur: Payload stores the active tab index per-document in payload_preferences (e.g. key collection-trips-1, value {"fields":{"_index-8":{"tabIndex":5}}}). If a developer later reduces the number of tabs in a collection config (e.g. from 6 to 2), any document that was previously viewed with a higher tab selected will crash on load.

Impact: The crash is unrecoverable in the admin panel — the document cannot be opened or edited. In Chromium, React's error boundary catches it but the page is blank. In Firefox, it crashes completely. The only fix is manually resetting the preference via the REST API.

Suggested fix (one-line):

- const activeTabDescription = activeTabConfig.admin?.description ?? activeTabConfig.description;
+ const activeTabDescription = activeTabConfig?.admin?.description ?? activeTabConfig?.description;

Link to the code that reproduces this issue

https://github.com/payloadcms/payload/blob/main/packages/ui/src/fields/Tabs/index.tsx

Reproduction Steps

1. Create a collection with a tabs field containing 3+ tabs
2. Create a document in that collection
3. Open the document in the admin panel, click on the last tab (e.g. tab index 2)
4. Payload stores tabIndex: 2 in payload_preferences for this document
5. Now modify the collection config to reduce to 2 tabs (index 0 and 1)
6. Rebuild and restart the server
7. Open the same document — the admin panel crashes with:

   TypeError: Cannot read properties of undefined (reading 'admin')
   

Affected area(s)

UI

Environment Info

Binaries:
  Node: 22.17.0
  npm: 11.7.0
Relevant Packages:
  payload: 3.75.0
  next: 15.5.12
  @payloadcms/db-postgres: 3.75.0
  @payloadcms/next/utilities: 3.75.0
  @payloadcms/richtext-lexical: 3.75.0
  @payloadcms/ui/shared: 3.75.0
  react: 19.2.4
  react-dom: 19.2.4
Operating System:
  Platform: linux
  Arch: x64

[github-actions]

🚀 This is included in version v3.76.1