bugfix: wrong conditional proprieties on ObjectBrowser (#4190)

Co-authored-by: Piero Nicolli <[email protected]>
Co-authored-by: Víctor Fernández de Alba <[email protected]>
Co-authored-by: Martina Bustacchini <[email protected]>
Co-authored-by: Martina Bustacchini <[email protected]>
Co-authored-by: Steve Piercy <[email protected]>
Co-authored-by: Piero Nicolli <[email protected]>

packages/volto/news/4190.bugfix

@@ -0,0 +1 @@
+Fixed wrong conditional proprieties on `ObjectBrowser` for multiple selection. @deodorhunter @Wagner3UB

packages/volto/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -296,8 +296,21 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    return this.props.selectableTypes.length > 0
-      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
+    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    if (
+      maximumSelectionSize &&
+      data &&
+      mode === 'multiple' &&
+      maximumSelectionSize <= data.length
+    )
+      // The item should actually be selectable, but only for removing it from already selected items list.
+      // handleClickOnItem will handle the deselection logic.
+      // The item is not selectable if we reached/exceeded maximumSelectionSize and is not already selected.
+      return data.some(
+        (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+      );
+    return selectableTypes.length > 0
+      ? selectableTypes.indexOf(item['@type']) >= 0
       : true;
   };
 
@@ -315,16 +328,24 @@ class ObjectBrowserBody extends Component {
           !this.props.maximumSelectionSize ||
           this.props.mode === 'multiple' ||
           !this.props.data ||
-          this.props.data.length < this.props.maximumSelectionSize
+          this.props.data.length <= this.props.maximumSelectionSize
         ) {
+          let isDeselecting;
+          if (this.props.mode === 'multiple' && Array.isArray(this.props.data))
+            isDeselecting = this.props.data.some(
+              (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+            );
           this.onSelectItem(item);
           let length = this.props.data ? this.props.data.length : 0;
-
-          let stopSelecting =
-            this.props.mode !== 'multiple' ||
-            (this.props.maximumSelectionSize > 0 &&
-              length + 1 >= this.props.maximumSelectionSize);
-
+          let stopSelecting = this.props.mode !== 'multiple';
+          if (isDeselecting && !stopSelecting)
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length - 1 >= this.props.maximumSelectionSize;
+          else
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length + 1 >= this.props.maximumSelectionSize;
           if (stopSelecting) {
             this.props.closeObjectBrowser();
           }