Listed item for a component loses interactivity after it's added to canvas

Hi @lauriii,

I attempted to reproduce the issue, but the context menu seems to be working correctly for both code components and library components.

I've attached screenshots for reference. Could you please provide more details if the issue persists on your end or if there are specific steps where it fails?

Looking forward to your insights!

Updating title for consistent terminology.

Tagging per https://www.drupal.org/project/experience_builder/issues/3455753#release....

Adjusting the title to express that this is not the case before the component is dragged to the canvas. It's also any interaction that's lost, not just the contextual menu. You also can't drag the component again and its preview doesn't appear.

Also, the preview is not working for existing components (eg- Heading, Hero) once dragged to Canvas.

Hm i'm not able to reproduce this issue

Nevermind! I am able to reproduce it. I was clicking to insert instead of dragging.

I think what's happening is when an item is dragged out of the Components list, a clone from SortableJS replaces it in the list. But that clone doesn't have any of the React event handlers that the original item had. So for example the component preview no longer works onMouseEnter, for all the components, not just code components.

So that's why it works when you close and re-open the Components list, since in that state, only the originals are there due to re-rendering, no clones.

Will continue tomorrow.

Updating title because this affects any item under the Components list, not just exposed code components.

+1 #13

I tried debugging this a couple of days ago and came to the same conclusion. I attempted to reattach the event listeners, but it didn’t work. I also tried replacing the cloned element with the original one, but the item in the event is different from the original element—it is the rendered output of that component.

I had an idea I wanted to quickly try. I'm just reading #13 now, I think it's the accurate description of the problem.

Something like this fixes it — re-triggering the useEffect hook that initializes SortableJS in its onEnd handler:

diff --git a/ui/src/components/list/List.tsx b/ui/src/components/list/List.tsx
index 3e5835cb..4614b325 100644
--- a/ui/src/components/list/List.tsx
+++ b/ui/src/components/list/List.tsx
@@ -1,6 +1,5 @@
 import type React from 'react';
-import { useMemo } from 'react';
-import { useEffect, useRef, useCallback } from 'react';
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import styles from './List.module.css';
 import {
   selectDragging,
@@ -32,6 +31,7 @@ const List: React.FC<ListProps> = (props) => {
   const sortableInstance = useRef<Sortable | null>(null);
   const listElRef = useRef<HTMLDivElement>(null);
   const { isDragging } = useAppSelector(selectDragging);
+  const [sortableResetSignal, setSortableResetSignal] = useState(false);
 
   // Sort items and convert to array.
   const sortedItems = useMemo(() => {
@@ -53,6 +53,12 @@ const List: React.FC<ListProps> = (props) => {
   const handleDragEnd = useCallback(() => {
     dispatch(setListDragging(false));
     dispatch(unsetTargetSlot());
+
+    if (sortableInstance.current !== null) {
+      sortableInstance.current.destroy();
+      sortableInstance.current = null;
+      setSortableResetSignal((prev) => !prev);
+    }
   }, [dispatch]);
 
   const handleDragMove = useCallback(
@@ -105,6 +111,7 @@ const List: React.FC<ListProps> = (props) => {
     handleDragEnd,
     handleDragClone,
     handleDragMove,
+    sortableResetSignal,
   ]);
 
   return (

The above didn't work for me. I wasn't able to find a good solution.

1. Calling something like evt.clone.replaceWith(evt.item) would require changes to usePreviewSortable.ts where it changes the innerHTML to the rendered markup (updateData()) so it can render in the preview and want to avoid changes to that file if possible.

2. Tried #16 and similar things as the above to try to trigger a re-render of but I couldn't get it to work.

3. Confusing React by passing in a Math.random() like <ListItem key={Math.random()} .../> kinda works but is bad practice and also causes SortableJS errors 😛 lol

Paired with @balintbrews and we got a working solution :)) Setting a unique key to the component list onDragEnd instead of an individual list item works.

Merged!