No upward auto-scroll when components are dragged

Cypress unit tests are failing due to . Please merge in upstream origin/0.x, #3466580: CI jobs >sometimes< not finding modules/custom/experience_builder should have fixed that particular error.

Cypress E2E tests are not passing. 😞

Assigning to myself to review what's been done and update/complete as necessary.

Discussed with @jessebaker: it makes sense to expand the scope here slightly to address #3454125-53: Implement temporary design system for the DrupalCon Barcelona demo, point 1.3.

If this issue's MR does not address it, we'll need a follow-up for it.

This is in the critical path for #3454094: Milestone 0.1.0: Experience Builder Demo — see #3454125-53: Implement temporary design system for the DrupalCon Barcelona demo.1.3.

Tried the MR for curiosity and it didn't work but I'll be keeping an eye on this one :)

I ended up creating #3470603: Scroll-wheel is not working while dragging to track that as a separate issue. MR is incoming for the other described problem as well as #10.

I switched to the MR branch and ran npm run build.

If I click the plus and then scroll in the components, it works initially, but when I do scrolling in the main area and go back then it wasn't working.

In the main area, I could scroll down but when I tried scrolling up then it wouldn't go to the top.

I'm on Mac and testing with Chrome. Maybe others will have better luck?

Also hovering over hero had the preview "under" the main display area so you can't see it.

Screenshot of last issue.

Thanks, @kristen pol! I can definitely see that I broke the previews! 🤦🏻 The rest I can't reproduce yet, but I'll investigate.

Stressing the importance.

I previously attempted to fix all kinds of scrolling problems under this single issue. That wasn't a good idea: some of them are more important than others and should land faster.

I would like to refocus this issue on the automatic scrolling while dragging components. I updated my MR to reflect that:

I opened two new issues with MRs:

• #3471102: Unable to scroll component list — I believe this is the most critical and it's what's mostly blocking you, @kristen pol.
• #3471108: Unable to scroll component props form

This didn't work for me:

• switch to the MR branch
• cd ui
• npm i
• npm run build
• delete all xb component config
• drush cr
• add a couple hero components at bottom
• try moving a bottom hero to the top

Note that I could scroll up if I had my cursor in the background grey area rather than in the desktop area.

@kristen pol, we are only tackling the automated scroll in this issue. So you should be able to drag a component from the bottom to the top and have the page scroll automatically when you reach the top while dragging when there is more space upwards.

I should have added that this isn't the smoothest of an experience as it could be, and you may need to be a bit patient for it to kick in. It's something that SortableJS provides as a plugin. At this stage, I would say we need to move forward with this, and we can open a follow-up issue if we think we want to make the interaction smoother.

What you're describing in #24 also sounds like you may have tried using the scroll-wheel of your mouse while dragging a component. Is that the case? If so, we have #3470603: Scroll-wheel is not working while dragging to address that.

Thanks. I don’t have a mouse… using laptop touchpad. I did wait a bit but I’ll try again. I only tried going from bottom to top as you described.

I see what's going on. If I go just below the black header area, then it works. If I go into the black header area, it doesn't. i.e. I was going too far up.

Should it work if you go into that area?

Popped a couple of comments on the MR, I agree we should figure out why dragging is blocked by the nav. I suspect it's something to do with the fixed positioning.

I ran some tests locally and bumping the scrollsensitivity up to 100 or so felt like it made the scrolling experience smoother, since thats accounting for the 60px we are losing from the nav blocking the scroll

Ah interesting, did a search for the fixed element scoll issues in the Sortable JS queue and came across this issue - https://github.com/SortableJS/Sortable/issues/1582

You are using native browser autoscroll because forceFallback is not set to true in the options. You will have to set forceFallback: true and then set the scrollSensitivity option. But you must use 1.9.0 because this option is broken in the 1.10.0-rc versions.

We are on 1.15 so it's not broken for us, we might just need to experiement with forceFallback? I'm off this for the day but leaving these here so I/someone eles can review and see if thats an option for us

Merged! Thank you everyone

Thanks!

I have a video that shows the behavior I'm seeing:

https://youtu.be/j46NzjwEfp8

1. Can't scroll into header area (which I've mentioned before)
2. There is a very small region that causes scroll (maybe okay?)
3. The scroll speed for me was very slow in some cases but I couldn't figure out when/why

I can work around these but maybe there should be follow-up issues for some of this if there aren't already.

Lauri said I should create an issue so here it is:

#3472650: Improve auto-scrolling when components are dragged