{/* Add split-top drop area for first root-level row */}
- {isFirstRootItem && (
+ {absoluteIndex === 0 && (
= ({
- canFocusItem,
className = '',
columns = [{ name: 'name', label: 'Name' }],
dropContextName,
@@ -36,74 +41,17 @@ export const NestedSectionsTable: React.FC = ({
const [firstCellWidth, setFirstCellWidth] = React.useState(0)
const firstCellRef = React.useRef(null)
- const totalVisibleItems = React.useMemo(() => {
- if (!rootItems) {
- return 0
- }
-
- const countVisibleItems = (items: SectionItem[]): number => {
- let count = 0
- for (const item of items) {
- count++
- if (item.rows && openItemKeys?.has(item.itemKey)) {
- count += countVisibleItems(item.rows)
- }
- }
- return count
- }
-
- return countVisibleItems(rootItems)
- }, [rootItems, openItemKeys])
-
- // Get row at a specific visible index
- const getItemFromIndex = React.useCallback(
- (targetIndex: number): SectionItem | undefined => {
- if (!rootItems) {
- return undefined
- }
-
- const findItemAtIndex = ({
- currentIndex,
- items,
- targetIndex,
- }: {
- currentIndex: number
- items: SectionItem[]
- targetIndex: number
- }): SectionItem | undefined => {
- for (const item of items) {
- if (currentIndex === targetIndex) {
- return item
- }
- currentIndex++
- if (item.rows && openItemKeys?.has(item.itemKey)) {
- const found = findItemAtIndex({ currentIndex, items: item.rows, targetIndex })
- if (found) {
- return found
- }
- }
- }
- return undefined
- }
-
- return findItemAtIndex({ currentIndex: 0, items: rootItems, targetIndex })
- },
- [rootItems, openItemKeys],
- )
-
- // Get visual index from row ID
const getIndexFromItemKey = React.useCallback(
(itemKey: ItemKey | null): number => {
if (itemKey === null) {
return -1
}
+ let currentIndex = 0
const findIndex = ({
- currentIndex,
items,
targetItemKey,
}: {
- currentIndex: number
items: SectionItem[]
targetItemKey: ItemKey | null
}): number => {
@@ -113,7 +61,7 @@ export const NestedSectionsTable: React.FC = ({
}
currentIndex++
if (item.rows && openItemKeys?.has(item.itemKey)) {
- const found = findIndex({ currentIndex, items: item.rows, targetItemKey })
+ const found = findIndex({ items: item.rows, targetItemKey })
if (found !== -1) {
return found
}
@@ -122,9 +70,7 @@ export const NestedSectionsTable: React.FC = ({
return -1
}
- return rootItems
- ? findIndex({ currentIndex: 0, items: rootItems, targetItemKey: itemKey })
- : -1
+ return rootItems ? findIndex({ items: rootItems, targetItemKey: itemKey }) : -1
},
[rootItems, openItemKeys],
)
@@ -135,7 +81,7 @@ export const NestedSectionsTable: React.FC = ({
[focusedItemKey, getIndexFromItemKey],
)
- const onSelectionChange = React.useCallback(
+ const onItemClick = React.useCallback(
({
itemKey,
options,
@@ -152,65 +98,42 @@ export const NestedSectionsTable: React.FC = ({
if (shiftKey) {
// Shift selection: select range from anchor to current item
// Set anchor if not set
- if (selectionAnchorItemKey === null) {
- setSelectionAnchorItemKey(itemKey)
- // Just select this item as the starting point
- updateSelections({ itemKeys: [itemKey] })
- return
+ const anchorItemKey = selectionAnchorItemKey || itemKey
+ if (!selectionAnchorItemKey) {
+ setSelectionAnchorItemKey(anchorItemKey)
}
- // Find indexes for anchor and current item
- const anchorIndex = getIndexFromItemKey(selectionAnchorItemKey)
- const currentIndex = getIndexFromItemKey(itemKey)
-
- if (anchorIndex === -1 || currentIndex === -1) {
- // Fallback to simple selection if indexes not found
- updateSelections({ itemKeys: [itemKey] })
- return
- }
-
- // Collect all focusable items in the range
- const startIndex = Math.min(anchorIndex, currentIndex)
- const endIndex = Math.max(anchorIndex, currentIndex)
- const rangeItemKeys: Array<`${string}-${number | string}`> = []
-
- for (let i = startIndex; i <= endIndex; i++) {
- const item = getItemFromIndex(i)
- if (item && canFocusItem(item)) {
- rangeItemKeys.push(item.itemKey)
- }
- }
+ const itemKeysInRange = getItemKeysBetween({
+ itemKeyA: itemKey,
+ itemKeyB: anchorItemKey,
+ openItemKeys,
+ rootItems,
+ })
- updateSelections({ itemKeys: rangeItemKeys })
+ updateSelections({ itemKeys: itemKeysInRange })
} else {
// Normal selection: toggle single item
// Reset anchor for next shift selection
setSelectionAnchorItemKey(itemKey)
-
- const isCurrentlySelected = selectedItemKeys.has(itemKey)
- if (isCurrentlySelected) {
- const newItemKeys = new Set(selectedItemKeys)
- newItemKeys.delete(itemKey)
- updateSelections({ itemKeys: newItemKeys })
- } else {
- updateSelections({ itemKeys: [itemKey] })
- }
+ setFocusedItemKey(itemKey)
+ updateSelections({ itemKeys: selectedItemKeys.has(itemKey) ? [] : [itemKey] })
}
},
- [
- updateSelections,
- selectedItemKeys,
- selectionAnchorItemKey,
- getIndexFromItemKey,
- getItemFromIndex,
- canFocusItem,
- ],
+ [selectionAnchorItemKey, rootItems, openItemKeys, updateSelections, selectedItemKeys],
)
// Handle keyboard navigation
- const handleRowKeyPress = React.useCallback(
- ({ event, item }: { event: React.KeyboardEvent; item: SectionItem }) => {
- const { code, ctrlKey, metaKey, shiftKey } = event
+ const onItemKeyDown = React.useCallback(
+ ({
+ event,
+ indexPath,
+ item,
+ }: {
+ event: React.KeyboardEvent
+ indexPath: number[]
+ item: SectionItem
+ }) => {
+ const { code, ctrlKey, metaKey, shiftKey: isShiftPressed } = event
const isCtrlPressed = ctrlKey || metaKey
switch (code) {
@@ -218,31 +141,39 @@ export const NestedSectionsTable: React.FC = ({
case 'ArrowUp': {
event.preventDefault()
- const direction: -1 | 1 = code === 'ArrowUp' ? -1 : 1
- const currentIndex = getIndexFromItemKey(item.itemKey)
- let nextIndex = currentIndex + direction
-
- // Find next focusable row
- while (nextIndex >= 0 && nextIndex < totalVisibleItems) {
- const nextItem = getItemFromIndex(nextIndex)
- if (nextItem && canFocusItem(nextItem)) {
- setFocusedItemKey(nextItem.itemKey)
-
- // Handle shift+arrow for range selection
- if (shiftKey) {
- // Pass the selection event with shiftKey to the next row
- // The parent's selection logic should handle range selection
- onSelectionChange({
- itemKey: nextItem.itemKey,
- options: { ctrlKey, metaKey, shiftKey },
- })
+ const nextItem =
+ code === 'ArrowDown'
+ ? getNextVisibleItem({ indexPath, openItemKeys, rootItems })
+ : getPreviousVisibleItem({ indexPath, openItemKeys, rootItems })
+
+ if (nextItem) {
+ setFocusedItemKey(nextItem.itemKey)
+
+ // Handle selection with shift key (incremental selection)
+ if (isShiftPressed) {
+ if (!selectionAnchorItemKey) {
+ setSelectionAnchorItemKey(nextItem.itemKey)
}
- break
+ // Check if next item is already selected
+ const isTargetSelected = selectedItemKeys.has(nextItem.itemKey)
+ const newSelections = new Set(selectedItemKeys)
+
+ if (isTargetSelected) {
+ // Remove from selection (contracting)
+ newSelections.delete(item.itemKey)
+ } else {
+ if (!selectedItemKeys.has(item.itemKey)) {
+ newSelections.add(item.itemKey)
+ }
+ newSelections.add(nextItem.itemKey)
+ }
+
+ updateSelections({ itemKeys: newSelections })
+ } else {
+ setSelectionAnchorItemKey(nextItem.itemKey)
}
- nextIndex += direction
}
-
break
}
@@ -265,6 +196,8 @@ export const NestedSectionsTable: React.FC = ({
case 'Escape': {
event.preventDefault()
setFocusedItemKey(null)
+ setHoveredItemKey(null)
+ setSelectionAnchorItemKey(null)
onEscape()
break
}
@@ -279,24 +212,28 @@ export const NestedSectionsTable: React.FC = ({
case 'Space': {
event.preventDefault()
- onSelectionChange({
- itemKey: item.itemKey,
- options: { ctrlKey, metaKey, shiftKey },
- })
+ const newSelections = new Set(selectedItemKeys)
+
+ if (selectedItemKeys.has(item.itemKey)) {
+ newSelections.delete(item.itemKey)
+ } else {
+ newSelections.add(item.itemKey)
+ }
+
+ updateSelections({ itemKeys: newSelections })
break
}
}
},
[
- getIndexFromItemKey,
- totalVisibleItems,
- getItemFromIndex,
- canFocusItem,
- // onEnter,
onEscape,
onSelectAll,
+ openItemKeys,
+ rootItems,
+ selectedItemKeys,
+ selectionAnchorItemKey,
toggleItemExpand,
- onSelectionChange,
+ updateSelections,
],
)
@@ -345,7 +282,7 @@ export const NestedSectionsTable: React.FC = ({
setIsDragging(false)
setHoveredItemKey(null)
setTargetParentItemKey(null)
- // eslint-disable-next-line react-compiler/react-compiler
+
document.body.style.cursor = ''
},
onDragEnd(event) {
@@ -412,24 +349,28 @@ export const NestedSectionsTable: React.FC = ({
firstCellRef={firstCellRef}
firstCellWidth={firstCellWidth}
firstCellXOffset={firstCellXOffset}
- focusedItemIndex={focusedRowIndex}
+ focusedItemKey={focusedItemKey}
hoveredItemKey={hoveredItemKey}
isDragging={isDragging}
items={rootItems}
loadingItemKeys={loadingItemKeys}
onDroppableHover={onDroppableHover}
- onFocusChange={(index) => {
+ onFocusChange={(indexPath: number[]) => {
// Convert index back to row ID
- const row = getItemFromIndex(index)
+ const row = getItemByPath({
+ indexPath,
+ rootItems,
+ })
if (row) {
setFocusedItemKey(row.itemKey)
}
}}
+ onItemClick={onItemClick}
onItemDrag={onItemDrag}
- onItemKeyPress={handleRowKeyPress}
- onSelectionChange={onSelectionChange}
+ onItemKeyDown={onItemKeyDown}
openItemKeys={openItemKeys}
parentIndex={0}
+ parentIndexPath={[]}
parentItems={[]}
segmentWidth={segmentWidth}
selectedItemKeys={selectedItemKeys}
diff --git a/packages/ui/src/elements/TreeView/NestedSectionsTable/navigationUtils.ts b/packages/ui/src/elements/TreeView/NestedSectionsTable/navigationUtils.ts
new file mode 100644
index 00000000000..c9f6a180a1d
--- /dev/null
+++ b/packages/ui/src/elements/TreeView/NestedSectionsTable/navigationUtils.ts
@@ -0,0 +1,304 @@
+import type { ItemKey, SectionItem } from './types.js'
+
+export interface GetItemByPathArgs {
+ indexPath: number[]
+ rootItems: SectionItem[]
+}
+
+export interface GetNextVisibleItemArgs {
+ indexPath: number[]
+ openItemKeys: Set
+ rootItems: SectionItem[]
+}
+
+export interface GetPreviousVisibleItemArgs {
+ indexPath: number[]
+ openItemKeys: Set
+ rootItems: SectionItem[]
+}
+
+export interface GetItemKeysBetweenArgs {
+ filterFn?: (item: SectionItem) => boolean
+ itemKeyA: ItemKey
+ itemKeyB: ItemKey
+ openItemKeys: Set
+ rootItems: SectionItem[]
+}
+
+export interface FindItemPathArgs {
+ itemKey: ItemKey
+ rootItems: SectionItem[]
+}
+
+/**
+ * Retrieves an item from the tree structure by following the specified index path.
+ *
+ * @param args - Configuration object
+ * @param args.indexPath - Array of indices representing the path to the item (e.g., [0, 2, 1] for first item -> third child -> second grandchild)
+ * @param args.rootItems - The root-level items of the tree
+ * @returns The item at the specified path, or undefined if not found
+ *
+ * @example
+ * const item = getItemByPath({ indexPath: [0, 2], allItems: rootItems })
+ */
+export const getItemByPath = ({
+ indexPath,
+ rootItems: allItems,
+}: GetItemByPathArgs): SectionItem | undefined => {
+ let current = allItems
+ for (let i = 0; i < indexPath.length; i++) {
+ const item = current?.[indexPath[i]]
+ if (!item) {
+ return undefined
+ }
+ if (i === indexPath.length - 1) {
+ return item
+ }
+ current = item.rows
+ }
+ return undefined
+}
+
+/**
+ * Finds the next visible item in the tree, respecting the current expand/collapse state.
+ * Navigation follows depth-first order: children first, then siblings, then parent's siblings.
+ *
+ * @param args - Configuration object
+ * @param args.indexPath - Array of indices representing the current item's path
+ * @param args.allItems - The root-level items of the tree
+ * @param args.openItemKeys - Set of item keys that are currently expanded
+ * @returns The next visible item, or undefined if there is no next item
+ *
+ * @example
+ * const nextItem = getNextVisibleItem({ indexPath: [0, 1], allItems: rootItems, openItemKeys })
+ */
+export const getNextVisibleItem = ({
+ indexPath,
+ openItemKeys,
+ rootItems: rootItems,
+}: GetNextVisibleItemArgs): SectionItem | undefined => {
+ if (indexPath.length === 0) {
+ return undefined
+ }
+
+ const currentItem = getItemByPath({ indexPath, rootItems })
+ // If current item has visible children, navigate to first child
+ if (currentItem?.rows?.length && openItemKeys?.has(currentItem.itemKey)) {
+ return currentItem.rows[0]
+ }
+
+ // Otherwise, navigate to next sibling or parent's next sibling
+ let searchPath = [...indexPath]
+ while (searchPath.length > 0) {
+ const lastIndex = searchPath[searchPath.length - 1]
+ const parentPath = searchPath.slice(0, -1)
+ const siblings =
+ parentPath.length === 0
+ ? rootItems
+ : getItemByPath({ indexPath: parentPath, rootItems })?.rows || []
+
+ // Check if there's a next sibling
+ if (lastIndex + 1 < siblings.length) {
+ return siblings[lastIndex + 1]
+ }
+
+ // Move up to parent and try again
+ searchPath = parentPath
+ }
+
+ return undefined
+}
+
+/**
+ * Finds the previous visible item in the tree, respecting the current expand/collapse state.
+ * Navigation follows reverse depth-first order: previous sibling's deepest visible child, then parent.
+ *
+ * @param args - Configuration object
+ * @param args.indexPath - Array of indices representing the current item's path
+ * @param args.allItems - The root-level items of the tree
+ * @param args.openItemKeys - Set of item keys that are currently expanded
+ * @returns The previous visible item, or undefined if there is no previous item
+ *
+ * @example
+ * const prevItem = getPreviousVisibleItem({ indexPath: [0, 1], allItems: rootItems, openItemKeys })
+ */
+export const getPreviousVisibleItem = ({
+ indexPath,
+ openItemKeys,
+ rootItems: allItems,
+}: GetPreviousVisibleItemArgs): SectionItem | undefined => {
+ if (indexPath.length === 0) {
+ return undefined
+ }
+
+ const lastIndex = indexPath[indexPath.length - 1]
+
+ // If there's a previous sibling, navigate to its deepest visible child
+ if (lastIndex > 0) {
+ const parentPath = indexPath.slice(0, -1)
+ const siblings =
+ parentPath.length === 0
+ ? allItems
+ : getItemByPath({ indexPath: parentPath, rootItems: allItems })?.rows || []
+ let targetItem = siblings[lastIndex - 1]
+
+ // Navigate to the deepest visible child
+ while (targetItem?.rows?.length && openItemKeys?.has(targetItem.itemKey)) {
+ targetItem = targetItem.rows[targetItem.rows.length - 1]
+ }
+
+ return targetItem
+ }
+
+ // Otherwise, navigate to parent
+ if (indexPath.length > 1) {
+ return getItemByPath({ indexPath: indexPath.slice(0, -1), rootItems: allItems })
+ }
+
+ return undefined
+}
+
+/**
+ * Finds the index path of an item by its itemKey.
+ *
+ * @param args - Configuration object
+ * @param args.itemKey - The itemKey to search for
+ * @param args.rootItems - The root-level items of the tree
+ * @returns The index path to the item, or undefined if not found
+ *
+ * @example
+ * const path = findItemPath({ itemKey: 'section-123', rootItems })
+ * // Returns [0, 2, 1] if the item is at rootItems[0].rows[2].rows[1]
+ */
+export const findItemPath = ({ itemKey, rootItems }: FindItemPathArgs): number[] | undefined => {
+ const search = (items: SectionItem[], currentPath: number[]): number[] | undefined => {
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i]
+ const newPath = [...currentPath, i]
+
+ if (item.itemKey === itemKey) {
+ return newPath
+ }
+
+ if (item.rows?.length) {
+ const found = search(item.rows, newPath)
+ if (found) {
+ return found
+ }
+ }
+ }
+ return undefined
+ }
+
+ return search(rootItems, [])
+}
+
+/**
+ * Compares two index paths to determine their order in the tree.
+ *
+ * @param pathA - First index path
+ * @param pathB - Second index path
+ * @returns Negative if pathA comes before pathB, positive if after, 0 if equal
+ */
+const compareIndexPaths = (pathA: number[], pathB: number[]): number => {
+ const minLength = Math.min(pathA.length, pathB.length)
+
+ for (let i = 0; i < minLength; i++) {
+ if (pathA[i] !== pathB[i]) {
+ return pathA[i] - pathB[i]
+ }
+ }
+
+ // If all compared indices are equal, the shorter path comes first
+ return pathA.length - pathB.length
+}
+
+/**
+ * Gathers all itemKeys between two items in the tree, inclusive of both items.
+ * Only includes visible items (respecting the current expand/collapse state).
+ * Automatically determines which item comes first and handles the range accordingly.
+ *
+ * @param args - Configuration object
+ * @param args.itemKeyA - The itemKey of one end of the range
+ * @param args.itemKeyB - The itemKey of the other end of the range
+ * @param args.rootItems - The root-level items of the tree
+ * @param args.openItemKeys - Set of item keys that are currently expanded
+ * @param args.filterFn - Optional filter function to exclude certain items from the result
+ * @returns Array of itemKeys in the range (in order), or empty array if either item is not found
+ *
+ * @example
+ * // Works regardless of which item comes first in the tree
+ * const keys = getItemKeysBetween({
+ * itemKeyA: 'section-5',
+ * itemKeyB: 'section-1',
+ * rootItems,
+ * openItemKeys,
+ * filterFn: (item) => item.isEnabled // optional filter
+ * })
+ */
+export const getItemKeysBetween = ({
+ filterFn,
+ itemKeyA,
+ itemKeyB,
+ openItemKeys,
+ rootItems,
+}: GetItemKeysBetweenArgs): ItemKey[] => {
+ const pathA = findItemPath({ itemKey: itemKeyA, rootItems })
+ const pathB = findItemPath({ itemKey: itemKeyB, rootItems })
+
+ if (!pathA || !pathB) {
+ return []
+ }
+
+ // Determine which path comes first
+ const comparison = compareIndexPaths(pathA, pathB)
+
+ // If the paths are the same, return just that one item
+ if (comparison === 0) {
+ const item = getItemByPath({ indexPath: pathA, rootItems })
+ if (item && (!filterFn || filterFn(item))) {
+ return [item.itemKey]
+ }
+ return []
+ }
+
+ // Swap if necessary so firstPath always comes before lastPath
+ const [firstPath, _lastPath, lastKey] =
+ comparison < 0 ? [pathA, pathB, itemKeyB] : [pathB, pathA, itemKeyA]
+
+ const result: ItemKey[] = []
+ let currentPath = firstPath
+
+ // Collect items from first to last
+ while (currentPath) {
+ const currentItem = getItemByPath({ indexPath: currentPath, rootItems })
+
+ if (currentItem) {
+ // Apply filter if provided
+ if (!filterFn || filterFn(currentItem)) {
+ result.push(currentItem.itemKey)
+ }
+
+ // Stop if we've reached the last item
+ if (currentItem.itemKey === lastKey) {
+ break
+ }
+ }
+
+ // Move to the next visible item
+ const nextItem = getNextVisibleItem({ indexPath: currentPath, openItemKeys, rootItems })
+ if (!nextItem) {
+ break
+ }
+
+ // Find the path of the next item
+ const nextPath = findItemPath({ itemKey: nextItem.itemKey, rootItems })
+ if (!nextPath) {
+ break
+ }
+
+ currentPath = nextPath
+ }
+
+ return result
+}
diff --git a/packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts b/packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts
index 89eaaa05645..0a39a77bdf4 100644
--- a/packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts
+++ b/packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts
@@ -11,7 +11,6 @@ export type Column = {
}
export type NestedSectionsTableProps = {
- canFocusItem: (item: SectionItem) => boolean
className?: string
columns?: Column[]
dropContextName: string
diff --git a/packages/ui/src/elements/TreeView/TreeViewTable/index.tsx b/packages/ui/src/elements/TreeView/TreeViewTable/index.tsx
index c06c17ef325..b50c454b743 100644
--- a/packages/ui/src/elements/TreeView/TreeViewTable/index.tsx
+++ b/packages/ui/src/elements/TreeView/TreeViewTable/index.tsx
@@ -12,7 +12,6 @@ const dropContextName = 'tree-view-table'
export function TreeViewTable() {
const {
- canFocusItem,
clearSelections,
collectionSlug,
loadingItemKeys,
@@ -31,7 +30,6 @@ export function TreeViewTable() {
{/* TODO: remove this button */}
boolean
clearSelections: () => void
collectionSlug: CollectionSlug
loadingItemKeys: Set
@@ -52,7 +51,6 @@ export type TreeViewContextValue = {
}
const Context = React.createContext({
- canFocusItem: () => true,
clearSelections: () => {},
collectionSlug: '' as CollectionSlug,
loadingItemKeys: new Set(),
@@ -379,14 +377,6 @@ export function TreeViewProvider({
[moveItems, getSelectedItems, items, t],
)
- const canFocusItem = React.useCallback(
- (item: SectionItem) => {
- const unfocusableIDs = getAllDescendantIDs({ itemKeys: selectedItemKeys, items })
- return !unfocusableIDs.has(item.itemKey)
- },
- [selectedItemKeys, items],
- )
-
const rootItems: TreeViewContextValue['rootItems'] = React.useMemo(
() => buildItemHierarchy({ i18nLanguage: i18n.language, items }),
[items, i18n.language],
@@ -401,7 +391,6 @@ export function TreeViewProvider({
return (
diff --git a/packages/ui/src/views/Edit/index.tsx b/packages/ui/src/views/Edit/index.tsx
index 914ac029cc7..c0a5c950f47 100644
--- a/packages/ui/src/views/Edit/index.tsx
+++ b/packages/ui/src/views/Edit/index.tsx
@@ -1,8 +1,8 @@
-/* eslint-disable react-compiler/react-compiler -- TODO: fix */
'use client'
import type { ClientUser, DocumentViewClientProps } from 'payload'
+import { useModal } from '@faceless-ui/modal'
import { useRouter, useSearchParams } from 'next/navigation.js'
import { formatAdminURL } from 'payload/shared'
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -112,6 +112,7 @@ export function DefaultEditView({
onRestore,
onSave: onSaveFromContext,
} = useDocumentDrawerContext()
+ const { closeModal } = useModal()
const isInDrawer = Boolean(drawerSlug)
@@ -175,18 +176,20 @@ export function DefaultEditView({
(globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave),
)
- const preventLeaveWithoutSaving =
- typeof disableLeaveWithoutSaving !== 'undefined' ? !disableLeaveWithoutSaving : !autosaveEnabled
-
const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false)
const [showTakeOverModal, setShowTakeOverModal] = useState(false)
const [editSessionStartTime, setEditSessionStartTime] = useState(Date.now())
const lockExpiryTime = lastUpdateTime + lockDurationInMilliseconds
-
const isLockExpired = Date.now() > lockExpiryTime
+ const preventLeaveWithoutSaving =
+ !isReadOnlyForIncomingUser &&
+ (typeof disableLeaveWithoutSaving !== 'undefined'
+ ? !disableLeaveWithoutSaving
+ : !autosaveEnabled)
+
const schemaPathSegments = useMemo(() => [entitySlug], [entitySlug])
const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(() => {
@@ -253,16 +256,14 @@ export function DefaultEditView({
nextPath.includes(path),
)
- // Only retain the lock if the user is still viewing the document
- if (!isInternalView) {
- if (isLockOwnedByCurrentUser) {
- try {
- await unlockDocument(id, collectionSlug ?? globalSlug)
- setDocumentIsLocked(false)
- setCurrentEditor(null)
- } catch (err) {
- console.error('Failed to unlock before leave', err) // eslint-disable-line no-console
- }
+ // Remove the lock if the user is navigating away from the document view they have locked
+ if (isLockOwnedByCurrentUser && !isInternalView) {
+ try {
+ await unlockDocument(id, collectionSlug ?? globalSlug)
+ setDocumentIsLocked(false)
+ setCurrentEditor(null)
+ } catch (err) {
+ console.error('Failed to unlock before leave', err) // eslint-disable-line no-console
}
}
}
@@ -577,7 +578,7 @@ export function DefaultEditView({
}}
/>
)}
- {!isReadOnlyForIncomingUser && preventLeaveWithoutSaving && (
+ {preventLeaveWithoutSaving && (
)}
{!isInDrawer && (
@@ -675,6 +676,7 @@ export function DefaultEditView({
readOnly={!hasSavePermission}
requirePassword={!id}
setValidateBeforeSubmit={setValidateBeforeSubmit}
+ // eslint-disable-next-line react-compiler/react-compiler
useAPIKey={auth.useAPIKey}
username={data?.username}
verify={auth.verify}
diff --git a/test/admin/e2e/document-view/e2e.spec.ts b/test/admin/e2e/document-view/e2e.spec.ts
index 249899f1e57..077f26e34f9 100644
--- a/test/admin/e2e/document-view/e2e.spec.ts
+++ b/test/admin/e2e/document-view/e2e.spec.ts
@@ -49,13 +49,15 @@ const description = 'Description'
let payload: PayloadTestSDK
-import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
-import { openNav } from 'helpers/e2e/toggleNav.js'
import path from 'path'
import { fileURLToPath } from 'url'
import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
+import { navigateToDoc } from '../../../helpers/e2e/navigateToDoc.js'
+import { selectInput } from '../../../helpers/e2e/selectInput.js'
+import { openDocDrawer } from '../../../helpers/e2e/toggleDocDrawer.js'
+import { openNav } from '../../../helpers/e2e/toggleNav.js'
import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
const filename = fileURLToPath(import.meta.url)
@@ -805,6 +807,43 @@ describe('Document View', () => {
await expect(customEditMenuItem).toHaveAttribute('href', `/custom-action?id=${docId}`)
})
})
+
+ describe('save before leaving modal', () => {
+ test('should prompt in drawer with edits', async () => {
+ await page.goto(postsUrl.create)
+ await page.locator('#field-title').fill('sean')
+ await saveDocAndAssert(page)
+
+ await page.goto(postsUrl.create)
+ await page.locator('#field-title').fill('heros')
+ await selectInput({
+ multiSelect: false,
+ option: 'sean',
+ filter: 'sean',
+ selectLocator: page.locator('#field-relationship'),
+ selectType: 'relationship',
+ })
+ await saveDocAndAssert(page)
+ await openDocDrawer({
+ page,
+ selector: '#field-relationship button.relationship--single-value__drawer-toggler',
+ })
+ const editModal = page.locator('.drawer--is-open .collection-edit')
+ await editModal.locator('#field-title').fill('new sean')
+
+ // Attempt to close the drawer
+ const closeButton = editModal.locator('button.doc-drawer__header-close')
+ await closeButton.click()
+
+ const leaveModal = page.locator('#leave-without-saving-doc-drawer')
+ await expect(leaveModal).toBeVisible()
+ await leaveModal.locator('#confirm-cancel').click()
+ await expect(editModal).toBeVisible()
+ await closeButton.click()
+ await leaveModal.locator('#confirm-action').click()
+ await expect(editModal).toBeHidden()
+ })
+ })
})
async function createPost(overrides?: Partial): Promise {
diff --git a/test/helpers/e2e/selectInput.ts b/test/helpers/e2e/selectInput.ts
index b219e1bc758..5e86eb643e9 100644
--- a/test/helpers/e2e/selectInput.ts
+++ b/test/helpers/e2e/selectInput.ts
@@ -1,9 +1,11 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Locator } from '@playwright/test'
-import { exactText } from 'helpers.js'
+import { exactText } from '../../helpers.js'
type SelectReactOptionsParams = {
+ filter?: string // Optional filter text to narrow down options
selectLocator: Locator // Locator for the react-select component
+ selectType?: 'relationship' | 'select'
} & (
| {
clear?: boolean // Whether to clear the selection before selecting new options
@@ -19,13 +21,35 @@ type SelectReactOptionsParams = {
}
)
+const selectors = {
+ hasMany: {
+ relationship: '.relationship--multi-value-label__text',
+ select: '.multi-value-label__text',
+ },
+ hasOne: {
+ relationship: '.relationship--single-value__text',
+ select: '.react-select--single-value',
+ },
+}
+
export async function selectInput({
selectLocator,
options,
option,
multiSelect = true,
clear = true,
+ filter,
+ selectType = 'select',
}: SelectReactOptionsParams) {
+ if (filter) {
+ // Open the select menu to access the input field
+ await openSelectMenu({ selectLocator })
+
+ // Type the filter text into the input field
+ const inputLocator = selectLocator.locator('.rs__input[type="text"]')
+ await inputLocator.fill(filter)
+ }
+
if (multiSelect && options) {
if (clear) {
await clearSelectInput({
@@ -36,7 +60,7 @@ export async function selectInput({
for (const optionText of options) {
// Check if the option is already selected
const alreadySelected = await selectLocator
- .locator('.multi-value-label__text', {
+ .locator(selectors.hasMany[selectType], {
hasText: optionText,
})
.count()
@@ -51,7 +75,7 @@ export async function selectInput({
} else if (option) {
// For single selection, ensure only one option is selected
const alreadySelected = await selectLocator
- .locator('.react-select--single-value', {
+ .locator(selectors.hasOne[selectType], {
hasText: option,
})
.count()
@@ -98,26 +122,25 @@ async function selectOption({
type GetSelectInputValueFunction = (args: {
multiSelect: TMultiSelect
selectLocator: Locator
+ selectType?: 'relationship' | 'select'
valueLabelClass?: string
}) => Promise
export const getSelectInputValue: GetSelectInputValueFunction = async ({
selectLocator,
multiSelect = false,
- valueLabelClass,
+ selectType = 'select',
}) => {
if (multiSelect) {
// For multi-select, get all selected options
const selectedOptions = await selectLocator
- .locator(valueLabelClass || '.multi-value-label__text')
+ .locator(selectors.hasMany[selectType])
.allTextContents()
return selectedOptions || []
}
// For single-select, get the selected value
- const singleValue = await selectLocator
- .locator(valueLabelClass || '.react-select--single-value')
- .textContent()
+ const singleValue = await selectLocator.locator(selectors.hasOne[selectType]).textContent()
return (singleValue ?? undefined) as any
}
diff --git a/test/joins/int.spec.ts b/test/joins/int.spec.ts
index 56149f2d857..878963ba899 100644
--- a/test/joins/int.spec.ts
+++ b/test/joins/int.spec.ts
@@ -1837,6 +1837,61 @@ describe('Joins Field', () => {
expect(found.docs).toHaveLength(1)
expect(found.docs[0].id).toBe(category.id)
})
+
+ it('should support where querying by a join field multiple times', async () => {
+ const category = await payload.create({ collection: 'categories', data: {} })
+ await payload.create({
+ collection: 'posts',
+ data: { group: { category: category.id }, isFiltered: true, title: 'my-category-title' },
+ })
+
+ const found = await payload.find({
+ collection: 'categories',
+ where: {
+ and: [
+ {
+ 'group.relatedPosts.title': { equals: 'my-category-title' },
+ },
+ {
+ 'group.relatedPosts.title': { exists: true },
+ },
+ {
+ 'group.relatedPosts.isFiltered': { equals: true },
+ },
+ ],
+ },
+ })
+
+ expect(found.docs).toHaveLength(1)
+ expect(found.docs[0].id).toBe(category.id)
+ })
+
+ it('should support where querying by a join field with hasMany relationship multiple times', async () => {
+ const category = await payload.create({ collection: 'categories', data: {} })
+ await payload.create({
+ collection: 'posts',
+ data: { categories: [category.id], title: 'my-title', isFiltered: true },
+ })
+
+ const found = await payload.find({
+ collection: 'categories',
+ where: {
+ and: [
+ {
+ 'hasManyPosts.title': { equals: 'my-title' },
+ },
+ {
+ 'hasManyPosts.title': { exists: true },
+ },
+ {
+ 'hasManyPosts.isFiltered': { equals: true },
+ },
+ ],
+ },
+ })
+ expect(found.docs).toHaveLength(1)
+ expect(found.docs[0].id).toBe(category.id)
+ })
})
async function createPost(overrides?: Partial, locale?: Config['locale']) {