Component List doesn't scroll

Confirmed that the component scroll isn't working in latest code as of a couple hours ago.

https://youtu.be/j46NzjwEfp8

The above should resolve the issue.

1. Allow default scrolling behavior

        } else {
          e.preventDefault();
          if (canvasPaneRef.current) {
            canvasPaneRef.current.scrollTop += e.deltaY;
            canvasPaneRef.current.scrollLeft += e.deltaX;
          }
        }

2. There was an issue with zoom in/out because the event was triggered two times - so I had to remove the 2nd call

        if (e.ctrlKey) {
          e.preventDefault();
          dispatch(canvasViewPortZoomDelta(e.deltaY));
        }

I've tested this and scrolling the component list does work now.

I can't say if the code is okay though so we need a frontend person to review.

I assume this is breaking something about interacting with the canvas because there's a test failure related to that. It's okay if you want to use this as a workaround in the meanwhile but before merging this, that would need to be investigated.

@boulaffasae, thank you for opening the issue and the MR. I left you a comment there. Can you please explain what you wrote about removing that second piece?

There was an issue with zoom in/out because the event was triggered two times - so I had to remove the 2nd call

Where did you see that the event was getting triggered twice? I didn't manage to reproduce it by adding those lines back.

Hi @balintbrews,

Looking at the code, modifierKeyPressedRef use modifierKeyPressed which is defined as 'ctrl' key

useHotkeys('ctrl', () => setModifierKeyPressed(true), {
    keydown: true,
    keyup: false,
  });

which mean this will be trigged when you hold ctrl, same goes for the code I removed.

It get triggered on e.ctrlKey.

The 1st one dispatch canvasViewPortZoomIn/Out, the 2nd one dispatch canvasViewPortZoomDelta

I recorded a video:
https://www.loom.com/share/96870c8622d244ff8cc29d7b1b23614e?sid=eb4e63ff-f8ad-4b0e-99d9-07e3acdca371

@boulaffasae and I worked on this issue together via Slack, and concluded that #4.1 is the actual solution, and that the code was most likely re-introduced by a merge mistake. (It was removed in 🐛 Unable to scroll component list Fixed .) We also had to add back #4.2, but it was indeed the case that the same event was being handled in two different ways simultaneously, so we ended up removing some code for that which came from 🐛 Component List doesn't scroll Needs review , which we deemed unnecessary.

Setting the issue to RTBC, I'd like another pair of eyes on this before we merge.

Awesome! Thanks for the fast review... hopefully this can land soon.

In the meantime I opened 📌 Write end-to-end test for scrolling component insert panel Active .

Tested, and code reviewed. Merging!

Yay!!!

Automatically closed - issue fixed for 2 weeks with no activity.