Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
While working on #2903543 and updating the Sortable.js library for drag&drop functionality, we noticed a strange behaviour in the case when the last paragraph is a "nested" one. When the window scroll position is at the very bottom and you try to move the last paragraph up, the moving paragraph gets stuck and loses focus.
Steps to reproduce:
- enable paragraphs_demo module
- apply patch from #2903543
- update the sortable.js library to the newest version (1.10.1 at the time of writing)
- create a new node with nested paragraphs
- scroll to the bottom of the page
- move the last nested paragraph 1px up
Proposed resolution
The sortable-drag class does not get removed when moving the last nested paragraph. Either find a way to remove it or recalculate the height of the paragraphs wrapper (the one around ALL paragraphs).
See the screenshot attached.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | 3090023-last-nested-paragraph-height-5-interdiff.txt | 4.83 KB | sasanikolic |
| #5 | 3090023-last-nested-paragraph-height-5.patch | 4.78 KB | sasanikolic |
| |||
| #2 | 3090023-last-nested-paragraph-height.patch | 961 bytes | sasanikolic |
| |||
| Last paragraph height issue.png | 605.72 KB | sasanikolic | |
Comments
Comment #2
sasanikolic CreditAttribution: sasanikolic commentedHere is the patch with a quickfix. We're setting the min-height when dragging the paragraph and removing it when the dragging is finished. This seems to fix the issue.
Note: I had to use .eq(0) to target the first element with that class, as the main wrapper of all paragraphs does not have a specific class. It would be helpful if it had that. Shall I do that here or is it too unrelated?
Comment #3
sasanikolic CreditAttribution: sasanikolic commentedComment #4
BerdirI'm fine with adding a class here if that helps to make the JS simpler. Unless that's somehow complicated?
Comment #5
sasanikolic CreditAttribution: sasanikolic commentedI added the main wrapper around the paragraphs in this patch. I also realized the onStart event was not called in this particular case, so we use onChoose event instead and set the min height there.
Function name is unrelated, but I think there's a typo...
Comment #7
BerdirDiscussed with Miro, the added class is quite complicated, he's OK with the eq(0), we just improved the comment a bit and committed.