The context menu is not accessible for JS components from library

Also, the "Edit" button in the context menu isn't working for components in the layers or in the preview.

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!

From @balintbrews on Slack:

After dragging an exposed code component to the content, you can’t interact with its sidebar node anymore, you need to close Components, and open it again.

Updating title for consistent terminology.

Tagging per https://www.drupal.org/project/experience_builder/issues/3455753#release... 🌱 Milestone 0.2.0: Experience Builder-rendered nodes Active .

Adjusting the title to express that this is not the case before the component is dragged to the canvas.

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 which is why the component preview no longer works onMouseEnter.

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

Will continue tomorrow.

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

+1 #13 🐛 The context menu is not accessible for JS components from library Active

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:

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!

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