diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx index 7b0dc5b6dc3..7017e8adfcb 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx @@ -96,7 +96,7 @@ export const AdapterControls = ( } }, hover: () => { - if (handleDragHover) { + if (handleDragHover != null) { handleDragHover() } }, diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx index 9a0db4bab38..b51489969ac 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx @@ -52,18 +52,10 @@ export const EditLabware = (props: Props): JSX.Element | null => { dispatch(openIngredientSelector(labwareOnDeck.id)) } - const [, drag] = useDrag(() => ({ + const [, drag] = useDrag({ type: DND_TYPES.LABWARE, item: { labwareOnDeck }, - beginDrag: () => { - setDraggedLabware(labwareOnDeck) - return { labwareOnDeck } - }, - endDrag: () => { - setHoveredLabware(null) - setDraggedLabware(null) - }, - })) + }) const [{ draggedLabware, isOver }, drop] = useDrop(() => ({ accept: DND_TYPES.LABWARE, @@ -82,8 +74,10 @@ export const EditLabware = (props: Props): JSX.Element | null => { } }, - hover: () => { - setHoveredLabware(labwareOnDeck) + hover: (item: DroppedItem, monitor: DropTargetMonitor) => { + if (monitor.canDrop()) { + setHoveredLabware(labwareOnDeck) + } }, collect: (monitor: DropTargetMonitor) => ({ isOver: monitor.isOver(), @@ -98,6 +92,10 @@ export const EditLabware = (props: Props): JSX.Element | null => { React.useEffect(() => { if (draggedItem != null) { setSlot(draggedItem.slot) + setDraggedLabware(draggedItem) + } else { + setHoveredLabware(null) + setDraggedLabware(null) } })