From d28dbe524c6b541988cbd72a4398cce1b2637584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= <timothee.alby@gmail.com>
Date: Tue, 14 Dec 2021 14:24:41 +0100
Subject: [PATCH] Merge pull request #6083 from
 overleaf/ta-on-select-conditional

Avoid Calling onSelect When Selection Hasn't Changed

GitOrigin-RevId: 20e9b9a905195c98c60fafe132adfbaa90925e40
---
 .../features/file-tree/contexts/file-tree-selectable.js   | 8 +++++++-
 .../features/file-tree/flows/rename-entity.test.js        | 5 +++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
index 7cda5609ce..496a6c553a 100644
--- a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
+++ b/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
diff --git a/services/web/test/frontend/features/file-tree/flows/rename-entity.test.js b/services/web/test/frontend/features/file-tree/flows/rename-entity.test.js
index 08d458e634..c279c7391b 100644
--- a/services/web/test/frontend/features/file-tree/flows/rename-entity.test.js
+++ b/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 () {