Disable controls when resizing

app/client/src/editorComponents/DraggableComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, createContext, useState, Context } from "react";
 import styled from "styled-components";
 import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
 import { useDrag, DragPreviewImage, DragSourceMonitor } from "react-dnd";
@@ -50,8 +50,13 @@ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
 
 type DraggableComponentProps = WidgetProps & ContainerProps;
 
+export const ResizingContext: Context<{
+  setIsResizing?: Function;
+}> = createContext({});
+
 const DraggableComponent = (props: DraggableComponentProps) => {
   const { isFocused, setFocus } = useContext(FocusContext);
+  const [isResizing, setIsResizing] = useState(false);
   const deleteWidget = () => {
     props.updateWidget &&
       props.updateWidget(WidgetOperations.DELETE, props.widgetId);
@@ -64,7 +69,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
   });
 
   return (
-    <React.Fragment>
+    <ResizingContext.Provider value={{ setIsResizing }}>
       <DragPreviewImage src={blankImage} connect={preview} />
       <DraggableWrapper
         ref={preview}
@@ -74,7 +79,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
             e.stopPropagation();
           }
         }}
-        show={props.widgetId === isFocused}
+        show={props.widgetId === isFocused && !isResizing}
         style={{
           display: isDragging ? "none" : "flex",
           flexDirection: "column",
@@ -99,7 +104,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
         </DeleteControl>
         {props.children}
       </DraggableWrapper>
-    </React.Fragment>
+    </ResizingContext.Provider>
   );
 };
 

app/client/src/editorComponents/ResizableComponent.tsx

@@ -4,6 +4,7 @@ import { Rnd } from "react-rnd";
 import { XYCoord } from "react-dnd";
 import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
 import { ContainerProps, ParentBoundsContext } from "./ContainerComponent";
+import { ResizingContext } from "./DraggableComponent";
 
 export type ResizableComponentProps = WidgetProps & ContainerProps;
 
@@ -35,6 +36,7 @@ const ResizableContainer = styled(Rnd)`
 `;
 
 export const ResizableComponent = (props: ResizableComponentProps) => {
+  const { setIsResizing } = useContext(ResizingContext);
   const { boundingParent } = useContext(ParentBoundsContext);
   let bounds = "body";
   if (boundingParent && boundingParent.current) {
@@ -47,6 +49,7 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
     delta: { width: number; height: number },
     position: XYCoord,
   ) => {
+    setIsResizing && setIsResizing(false);
     const leftColumn = props.leftColumn + position.x / props.parentColumnSpace;
     const topRow = props.topRow + position.y / props.parentRowSpace;
 
@@ -78,6 +81,9 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
       minHeight={props.parentRowSpace}
       style={{ ...props.style }}
       onResizeStop={updateSize}
+      onResizeStart={() => {
+        setIsResizing && setIsResizing(true);
+      }}
       resizeGrid={[props.parentColumnSpace, props.parentRowSpace]}
       bounds={bounds}
       enableResizing={{