Merge pull request #6083 from overleaf/ta-on-select-conditional

Avoid Calling onSelect When Selection Hasn't Changed

GitOrigin-RevId: 20e9b9a905195c98c60fafe132adfbaa90925e40

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -9,11 +9,13 @@ import {
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import _ from 'lodash'
 
 import { findInTree } from '../util/find-in-tree'
 import { useFileTreeMutable } from './file-tree-mutable'
 import { useFileTreeMainContext } from './file-tree-main'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
+import usePreviousValue from '../../../shared/hooks/use-previous-value'
 
 const FileTreeSelectableContext = createContext()
 
@@ -122,12 +124,16 @@ export function FileTreeSelectableProvider({
   }, [fileTreeData, selectedEntityIds])
 
   // calls `onSelect` on entities selection
+  const previousSelectedEntityIds = usePreviousValue(selectedEntityIds)
   useEffect(() => {
+    if (_.isEqual(selectedEntityIds, previousSelectedEntityIds)) {
+      return
+    }
     const selectedEntities = Array.from(selectedEntityIds)
       .map(id => findInTree(fileTreeData, id))
       .filter(Boolean)
     onSelect(selectedEntities)
-  }, [fileTreeData, selectedEntityIds, onSelect])
+  }, [fileTreeData, selectedEntityIds, previousSelectedEntityIds, onSelect])
 
   useEffect(() => {
     // listen for `editor.openDoc` and selected that doc

services/web/test/frontend/features/file-tree/flows/rename-entity.test.js

@@ -62,6 +62,7 @@ describe('FileTree Rename Entity Flow', function () {
       />,
       { socket: new MockedSocket() }
     )
+    onSelect.reset()
   })
 
   it('renames doc', function () {
@@ -76,6 +77,10 @@ describe('FileTree Rename Entity Flow', function () {
 
     const lastFetchBody = getLastFetchBody(fetchMatcher)
     expect(lastFetchBody.name).to.equal('b.tex')
+
+    // onSelect should have been called once only: when the doc was selected for
+    // rename
+    sinon.assert.calledOnce(onSelect)
   })
 
   it('renames folder', function () {