(Fix): Sorting Order and Sorting On are not working in Search Block e…

…dit mode (#5262) (#5875) Co-authored-by: dobri1408 <[email protected]> Co-authored-by: Claudia Ifrim <[email protected]> Co-authored-by: Alin Voinea <[email protected]>
plone · Mar 18, 2024 · c9bae32 · c9bae32
1 parent 91fb326
commit c9bae32
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 4 deletions.
diff --git a/cypress/tests/core/blocks/blocks-search.js b/cypress/tests/core/blocks/blocks-search.js
@@ -489,4 +489,62 @@ describe('Search Block Tests', () => {
       `Search results: ${results_number}`,
     );
   });
+
+  it('Search block - test on edit sort on and sort order', () => {
+    cy.visit('/');
+    cy.get('#toolbar-add > .icon').click();
+    cy.get('#toolbar-add-document').click();
+    cy.getSlateTitle().focus().click().type('My Search Page');
+
+    // Add Search listing block
+    cy.addNewBlock('search');
+
+    // Add search query criteria
+    cy.get('#default-query-0-query .react-select__value-container').click();
+    cy.get('#default-query-0-query .react-select__option')
+      .contains('Type')
+      .click();
+
+    cy.get('#default-query-0-query .fields:first-of-type > .field').click();
+    cy.get(
+      '#default-query-0-query .fields:first-of-type > .field .react-select__option',
+    )
+      .contains('Page')
+      .click();
+
+    cy.get('#default-query-0-query .fields:first-of-type > .field').click();
+    cy.get(
+      '#default-query-0-query .fields:first-of-type > .field .react-select__option',
+    )
+      .contains('Folder')
+      .click();
+
+    cy.get('#default-query-0-query .fields:first-of-type > .field').click();
+    cy.get(
+      '#default-query-0-query .fields:first-of-type > .field .react-select__option',
+    )
+      .contains('Event')
+      .click();
+
+    // reverse order
+    cy.get('label[for=field-sort_order_boolean-2-query]').click();
+    //check if the sorting order is working
+    cy.get('.listing-item').first().contains('My Event');
+    cy.get('#select-listingblock-sort-on').click();
+    cy.get('.react-select__menu .react-select__group')
+      .first()
+      .children()
+      .first()
+      .next()
+      .children()
+      .first()
+      .next()
+      .click();
+    cy.wait(5000);
+
+    cy.get('.listing-item').first().contains('My page');
+    //save page
+    cy.get('#toolbar-save > .icon').click();
+    cy.wait(500);
+  });
 });
diff --git a/packages/volto/news/5262.bugfix b/packages/volto/news/5262.bugfix
@@ -0,0 +1 @@
+(fix):  make search block sort and facets work on edit @dobri1408
diff --git a/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -63,9 +63,15 @@ const SearchBlockEdit = (props) => {
   const { query = {} } = data || {};
   // We don't need deep compare here, as this is just json serializable data.
   const deepQuery = JSON.stringify(query);
+
   useEffect(() => {
-    onTriggerSearch();
-  }, [deepQuery, onTriggerSearch]);
+    onTriggerSearch(
+      '',
+      data?.facets,
+      data?.query?.sort_on,
+      data?.query?.sort_order,
+    );
+  }, [deepQuery, onTriggerSearch, data]);
 
   return (
     <>

diff --git a/src/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/components/manage/Blocks/Search/hocs/withSearch.jsx
@@ -382,12 +382,12 @@ const withSearch = (options) => (WrappedComponent) => {
               query: data.query || {},
               facets: toSearchFacets || facets,
               searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || sortOn,
+              sortOn: toSortOn || undefined,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
-            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOn) setSortOn(toSortOn || undefined);
             if (toSortOrder) setSortOrder(toSortOrder);
             setSearchData(searchData);
             setLocationSearchData(getSearchFields(searchData));