diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx index d1d54b97e7d..6f297b752cb 100644 --- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx +++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx @@ -30,6 +30,8 @@ export const BlockNode = ({ block, blockIndex }: Props) => { blocksCoordinates, updateBlockCoordinates, isReadOnly, + focusedBlockId, + setFocusedBlockId, } = useGraph() const { typebot, updateBlock } = useTypebot() const { setMouseOverBlock, mouseOverBlock } = useStepDnd() @@ -91,7 +93,10 @@ export const BlockNode = ({ block, blockIndex }: Props) => { }) } - const onDragStart = () => setIsMouseDown(true) + const onDragStart = () => { + setFocusedBlockId(block.id) + setIsMouseDown(true) + } const onDragStop = () => setIsMouseDown(false) return ( @@ -131,6 +136,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => { cursor={isMouseDown ? 'grabbing' : 'pointer'} boxShadow="0px 0px 0px 1px #e9edf3;" _hover={{ shadow: 'lg' }} + zIndex={focusedBlockId === block.id ? 10 : 1} > void }) => { const { query } = useRouter() - const { setConnectingIds, connectingIds, openedStepId, setOpenedStepId } = - useGraph() + const { + setConnectingIds, + connectingIds, + openedStepId, + setOpenedStepId, + setFocusedBlockId, + } = useGraph() const { updateStep } = useTypebot() const [isConnecting, setIsConnecting] = useState(false) const [isPopoverOpened, setIsPopoverOpened] = useState( @@ -113,6 +118,7 @@ export const StepNode = ({ } const handleClick = (e: React.MouseEvent) => { + setFocusedBlockId(step.blockId) e.stopPropagation() if (isTextBubbleStep(step)) setIsEditing(true) setOpenedStepId(step.id) diff --git a/apps/builder/components/shared/VariableSearchInput.tsx b/apps/builder/components/shared/VariableSearchInput.tsx index 10c69b5142d..5dfc9a06826 100644 --- a/apps/builder/components/shared/VariableSearchInput.tsx +++ b/apps/builder/components/shared/VariableSearchInput.tsx @@ -75,6 +75,7 @@ export const VariableSearchInput = ({ debounced(e.target.value) onOpen() if (e.target.value === '') { + onSelectVariable(undefined) setFilteredItems([...variables.slice(0, 50)]) return } diff --git a/apps/builder/contexts/GraphContext.tsx b/apps/builder/contexts/GraphContext.tsx index 1e2b38abb52..641336b3e9b 100644 --- a/apps/builder/contexts/GraphContext.tsx +++ b/apps/builder/contexts/GraphContext.tsx @@ -73,6 +73,8 @@ const graphContext = createContext<{ openedStepId?: string setOpenedStepId: Dispatch> isReadOnly: boolean + focusedBlockId?: string + setFocusedBlockId: Dispatch> // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore }>({ @@ -98,6 +100,8 @@ export const GraphProvider = ({ const [blocksCoordinates, setBlocksCoordinates] = useState( {} ) + const [focusedBlockId, setFocusedBlockId] = useState() + useEffect(() => { setBlocksCoordinates( blocks.reduce( @@ -149,6 +153,8 @@ export const GraphProvider = ({ blocksCoordinates, updateBlockCoordinates, isReadOnly, + focusedBlockId, + setFocusedBlockId, }} > {children}