diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
index 3253e6ade4..d63241a440 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
@@ -8,11 +8,15 @@ import { useDraggable } from '../../contexts/file-tree-draggable'
import FileTreeItemName from './file-tree-item-name'
import FileTreeItemMenu from './file-tree-item-menu'
+import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
function FileTreeItemInner({ id, name, isSelected, icons }) {
const { hasWritePermissions, setContextMenuCoords } = useFileTreeMainContext()
- const hasMenu = hasWritePermissions && isSelected
+ const { selectedEntityIds } = useFileTreeSelectable()
+
+ const hasMenu =
+ hasWritePermissions && isSelected && selectedEntityIds.size === 1
const { isDragging, dragRef, isDraggable, setIsDraggable } = useDraggable(id)
diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js b/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js
index c95b496ee9..e332357db2 100644
--- a/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js
+++ b/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js
@@ -227,4 +227,64 @@ describe('', function () {
screen.getByRole('treeitem', { name: 'main.tex', selected: false })
screen.getByRole('treeitem', { name: 'other.tex', selected: true })
})
+
+ it('only shows a menu button when a single item is selected', function () {
+ const rootFolder = [
+ {
+ _id: 'root-folder-id',
+ docs: [
+ { _id: '456def', name: 'main.tex' },
+ { _id: '789ghi', name: 'other.tex' },
+ ],
+ folders: [],
+ fileRefs: [],
+ },
+ ]
+ renderWithEditorContext(
+ true}
+ refProviders={{}}
+ reindexReferences={() => null}
+ setRefProviderEnabled={() => null}
+ setStartedFreeTrial={() => null}
+ onSelect={onSelect}
+ onInit={onInit}
+ isConnected
+ />
+ )
+
+ const main = screen.getByRole('treeitem', {
+ name: 'main.tex',
+ selected: true,
+ })
+ const other = screen.getByRole('treeitem', {
+ name: 'other.tex',
+ selected: false,
+ })
+
+ // single item selected: menu button is visible
+ expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
+
+ // select the other item
+ fireEvent.click(other)
+
+ screen.getByRole('treeitem', { name: 'main.tex', selected: false })
+ screen.getByRole('treeitem', { name: 'other.tex', selected: true })
+
+ // single item selected: menu button is visible
+ expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
+
+ // multi-select the main item
+ fireEvent.click(main, { ctrlKey: true })
+
+ screen.getByRole('treeitem', { name: 'main.tex', selected: true })
+ screen.getByRole('treeitem', { name: 'other.tex', selected: true })
+
+ // multiple items selected: no menu button is visible
+ expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(0)
+ })
})