newDragSource() does not work in golden-layout 2.6.0

Question

We are (slowly and incredibly painfully) migrating from golden-layout 1.5.9 to golden-layout 2.6.0 in a huge Angular 16 production app.

Within our app, we have a dropdown menu containing the names of all available widgets that can be added to the page. During initialization, all of the HTML elements in the menu are added as drag sources using the newDragSource method of the GoldenLayout object.

In golden-layout 1.5.9 this worked perfectly and items from the menu could be dragged onto the page, and they would be added as golden-layout components with all expected functionality. Additionally, selecting an item in this menu with a click would also add the component to the page.

In version 2.6.0 this does not work at all. The menu items are not even draggable. Clicking an item in the menu does still work, and adds the selected component to the layout, and it has all expected functionality.

The code I am using to create the drag sources is as follows:

public createNewWidgetDragSource(element: HTMLElement, widgetModel: Widget): void {
  const gl = this.getGoldenLayoutInstance();
  const config = () => {
    const item: DragSource.ComponentItemConfig = {
      state: null,
      title: widgetModel.name,
      type: 'widget-golden-instance',
    };
    return item;
  };

  gl.newDragSource(element, config);
}

Note that this is the almost identical to code used in the golden-layout-ng-app reference app. In the reference app, the code works as expected. The reference app is using golden-layout 2.5.0.

Note that the component type widget-golden-instance is a generic golden-layout container component, which acts as a host for a number of our own widgets.

If I inspect the gl object in the code above, I can see that the _dragSources array inside the object is populated with the LI elements from the menu.

There are no errors in the editor or browser (just a deprecation warning for ComponentItemConfig under the DragSource namespace - I tried it without this and the behaviour is the same).

It just doesn't work.

Did I miss something? Is this a bug?

Edit

I feel this is somehow related to the fact that the list items I want to make dragSources are in a menu. If I just hard-code an element to the page and then make that element draggable (with the same createNewWidgetDragSource function) then it works as expected.

However, I have experimented with not initializing the elements in the menu as dragSources until the menu is actually opened and the list items are visible, and it still doesn't work.

If I call the createNewWidgetDragSource method and don't pass a HTML element to it, then I see an error from the golden-layout source, and I have verified that the method is being passed the list-item elements from the menu.

I tried updating the reference app to use golden-layout 2.6.0 instead of 2.5.0, and dragging still works there.

Everything looks correct, I have the right elements at the right time, there are no errors. It just refuses to work.

Answer 1

Eventually figured this out.

Even though I was making the list items in the menu the dragSource items, the mouseDown event handler (added by golden-layout when creating each dragSource) was being triggered on a label element inside the list item rather than on the list item itself, and there is some logic inside golden-layout that checks the mouseDown event target is the same as the dragSource element. Obviously it wasn't the same so that logic failed.

Making the labels inside the list items the dragSources instead fixed the issue