Show Builder: Dragging items outside of scratchpad area causes errors

[seankwilliams]

If you go into Show Builder, and rearrange a few items by dragging them around, you can eventually trigger errors by dragging the items outside of the scratchpad area:

After this happens, users are required to reload the page before they can use Show Builder.

Let's see if we can fix that error.

[kmid5280]

@seankwilliams I'm trying to better understand this error. As I understand it, you:

• Click on Show Builder
• Select a show
• Trigger the error by dragging the scratchpad items around

Am I on the right track about how to trigger the error?

[seankwilliams]

@kmid5280 Yep! You can add some tracks using the lower left of the page to scratchpad. Then, you can move around those tracks in scratchpad.

[kmid5280]

@seankwilliams I'm having some trouble recreating this error. Do you know if there are specific ways I need to drag the scratchpad item, or areas on the screen that I need to drag it over to trigger this? Do you know if this is dependent on one browser versus another one?

I do notice that if I take an item in the scratchpad and drag it back and forth over the other items, it will repeatedly trigger the "Empty item in scratchpad list, skipping..." console error in ShowBuilderPage, and the track may eventually disappear. Suppose this is related at all?

[seankwilliams]

@kmid5280 Looking at this deeper, the error seems to happen, at least in Firefox, when you try to drag a scratchpad item over the saved items list, or drag a saved items item over the scratchpad list. Here's a video: https://www.loom.com/share/cc10caeba38040b6b795b0a18f527637

I am not sure if "Empty item in scratchpad list, skipping..." is an actual error that we need to resolve, or it's just being logged to look like an error. It may be unrelated. From the console screenshot in the original issue description, I think the TypeError: e is undefined is what's causing the page to break.

[kmid5280]

@seankwilliams Okay I'm able to trigger it now. It seems like you can sometimes trigger the error by dragging the scratchpad item over one of the saved items.

I'm noticing that I can trigger the error pretty reliably if I drag an already existing Scratchpad item over one of the Saved Items. However if I add a new item to the Scratchpad and try to drag that over, it doesn't trigger the issue the same way. Wondering if that's consistent with your experience?

Are you supposed to be able to drag scratchpad items into the saved items section, i.e. are they supposed to be able to interact with each other? Or should it be restricted to where you can only use the arrow buttons? I wonder if what is happening is that the page is detecting that the Scratchpad item is being moved to the Saved Items section, but since the item is still a scratchpad item and doesn't have any kind of attribute designating it as a saved item, it is getting confused.

[seankwilliams]

@kmid5280 I don't think you're supposed to be able to drag items between scratchpad and saved items. Let me know if you see any code indicating the contrary, though.

[kmid5280]

@seankwilliams My theory is that the Scratchpad and Saved Items lists are interacting with each other even though they are not really set up to do so. If it's not necessary for them to be able to interact, for instance by dragging Scratchpad items to the Saved Item column and vice versa, perhaps there is a way to where, if an item from one section is being dragged, the other section gets temporarily disabled. Thinking this could be done by passing in a prop to that component that would disable it if an item from the other component is being dragged. It's not the most elegant solution but might be appropriate if this is just a one-off issue and unlikely to happen anywhere else in the app. What do you think?

[seankwilliams]

@kmid5280 You've got the right idea. It's been a long time since I've looked at the drag/drop code so I'm not sure how it's set up. Depending on how it's set up though, a better approach may to just not take any action if a scratchpad item is being dragged over the saved items area, or vice versa. That is most likely in the drag/drop code somewhere. I'm not familiar with the code since it's been a long time, so if disabling a section instead makes sense, that's okay too.