Merge pull request #295 from contentstack/VE-3974-focus-loses-when-a-field-is-deleted

Author: sairajchouhan

src/visualBuilder/components/FieldToolbar.tsx

@@ -46,6 +46,7 @@ const TOOLTIP_TOP_EDGE_BUFFER = 96;
 
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
+    hideOverlay: () => void;
 };
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -309,6 +310,14 @@ function FieldToolbarComponent(
         fetchFieldSchema();
     }, [fieldMetadata]);
 
+    useEffect(() => {
+        visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {
+            if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){
+                props.hideOverlay()
+            }
+        })
+    }, [])
+
     const multipleFieldToolbarButtonClasses = classNames(
         "visual-builder__button visual-builder__button--secondary",
         visualBuilderStyles()["visual-builder__button"],

src/visualBuilder/generators/generateToolbar.tsx

@@ -15,15 +15,17 @@ import FieldLabelWrapperComponent from "../components/fieldLabelWrapper";
 
 export function appendFocusedToolbar(
     eventDetails: VisualBuilderCslpEventDetails,
-    focusedToolbarElement: HTMLDivElement
+    focusedToolbarElement: HTMLDivElement,
+    hideOverlay: () => void
 ): void {
     appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-    appendFieldToolbar(eventDetails, focusedToolbarElement);
+    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
 }
 
 export function appendFieldToolbar(
     eventDetails: VisualBuilderCslpEventDetails,
-    focusedToolbarElement: HTMLDivElement
+    focusedToolbarElement: HTMLDivElement,
+    hideOverlay: () => void
 ): void {
     if (
         focusedToolbarElement.querySelector(
@@ -35,6 +37,7 @@ export function appendFieldToolbar(
     render(
         <FieldToolbarComponent
             eventDetails={eventDetails}
+            hideOverlay={hideOverlay}
         />,
         wrapper
     );

src/visualBuilder/listeners/mouseClick.ts

@@ -35,7 +35,7 @@ type AddFocusOverlayParams = Pick<
 type AddFocusedToolbarParams = Pick<
     EventListenerHandlerParams,
     "eventDetails" | "focusedToolbar"
->;
+> & { hideOverlay: () => void };
 
 function addOverlay(params: AddFocusOverlayParams) {
     if (!params.overlayWrapper || !params.editableElement) return;
@@ -53,7 +53,7 @@ export function addFocusedToolbar(params: AddFocusedToolbarParams): void {
 
     if (!editableElement || !params.focusedToolbar) return;
 
-    appendFocusedToolbar(params.eventDetails, params.focusedToolbar);
+    appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay);
 }
 
 async function handleBuilderInteraction(
@@ -143,6 +143,14 @@ async function handleBuilderInteraction(
     addFocusedToolbar({
         eventDetails: eventDetails,
         focusedToolbar: params.focusedToolbar,
+        hideOverlay: () => {
+            hideOverlay({
+                visualBuilderContainer: params.visualBuilderContainer,
+                visualBuilderOverlayWrapper: params.overlayWrapper,
+                focusedToolbar: params.focusedToolbar,
+                resizeObserver: params.resizeObserver,
+            });
+        }
     });
 
     const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;