Skip to content

Fix in-page drag-and-drop for the Listing block in Volto 18 and 19#7907

Merged
sneridagh merged 2 commits into
plone:mainfrom
Manik-Khajuria-5:In-page-drag-and-drop
Feb 26, 2026
Merged

Fix in-page drag-and-drop for the Listing block in Volto 18 and 19#7907
sneridagh merged 2 commits into
plone:mainfrom
Manik-Khajuria-5:In-page-drag-and-drop

Conversation

@Manik-Khajuria-5
Copy link
Copy Markdown
Member

@Manik-Khajuria-5 Manik-Khajuria-5 commented Feb 15, 2026


Summary

Fix in-page drag-and-drop behavior for the Listing block, which could not be repositioned in Volto 18 and 19.

Fixes #7879


Problem

When dragging a Listing block within the same page to change its position:

  • The preview animation works during drag.
  • After dropping, the block immediately returns to its original position.

Solution

  • Ensure the Listing block updates the block order state correctly after drop.
  • Align its drag-and-drop handling with other blocks.


screenrecording-2026-02-15_17-04-45.mp4

Closes #7879


Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request fixes a drag-and-drop bug in the Listing block for Volto 18 and 19. When users attempted to reposition a Listing block within a page, the block would visually move during the drag but immediately snap back to its original position after being dropped. The issue was caused by React.memo optimization preventing the component from re-rendering when its index (position) changed.

Changes:

  • Added index prop comparison to the Listing block's React.memo equality check to ensure re-renders when block position changes
  • Added changelog entry documenting the bugfix

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/volto/src/components/manage/Blocks/Listing/Edit.jsx Added nextProps.index !== prevProps.index check to the areEquals comparison function to enable proper re-rendering during drag-and-drop operations
packages/volto/news/7907.internal Added changelog entry for the bugfix

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@sabrina-bongiovanni
Copy link
Copy Markdown
Contributor

@Manik-Khajuria-5 Are you going to handle the PR or cherry-picking on volto 18 too? :)

@Manik-Khajuria-5
Copy link
Copy Markdown
Member Author

@sabrina-bongiovanni Yes, I can take care of that

@sneridagh sneridagh merged commit e003e54 into plone:main Feb 26, 2026
49 checks passed
sneridagh added a commit that referenced this pull request Mar 19, 2026
* main: (122 commits)
  Release 19.0.0-alpha.27
  Release @plone/slate 19.0.0-alpha.12
  Release @plone/razzle 1.0.0-alpha.1
  We do not release @plone/client from here
  Handle create-user 500 responses where body contains 'message' instead of 'error' (#7946)
  Dropzone filewidget a11y (#7956)
  Update css-minimizer-webpack-plugin to v7 and keep razzleOptions.enableSourceMaps control (#7934)
  Refactor Password Reset: Convert Class-Based Component to Functional Component (#7697)
  fix: Fixed searchable types in Object Browser Widget, adding also sel… (#7942)
  Fix in-page drag-and-drop for the Listing block in Volto 18 and 19 (#7907)
  Improved docs of Plone REST API JavaScript Client (#5576)
  Fix Moderate Comments control panel visibility based on Discussion Support addon installation (#7878)
  fix: Add authorization error handling to control panels (#7807)
  Fix subordering order tab (#7937) (#7939)
  Fix converting value to html in HtmlSlateWidget (#7938)
  razzle.config.js: Fix defaultPlugins missing name property to enable addon SCSS plugin replacement (#7908)
  Update users controlpanel to work with new response format (#7895)
  Avoid storing blocksClipboard in localstorage until it has a value (#7925)
  Remove link to Jobfamilie MEDICE: site is no longer a Volto site (redirects to non-Volto destination) (#7929)
  Exclude `.storybook` from ESLint's default hidden directory ignore list via `.eslintignore` to allow linting of Storybook configuration files (#7898)
  ...
davisagli pushed a commit to Manik-Khajuria-5/volto that referenced this pull request May 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

In-page drag and drop with listing block is not working

4 participants