From 9ab108f2b43149210fe74b1a6bdbf19bac521f49 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:50:45 +0100
Subject: [PATCH] performance(editor) Switch Event Handlers 2.0 (#6469)

- Switched lots of event handlers from onClick to onMouseDown, along
with updating the name of props if those use that naming.
- Added `onMouseDown` handler that stops propagation to the
react-contextify menu, so that the mouse down doesn't pass through it
and activate things underneath the menu.
- Added `stopPropagation` call to the `onMouseDown` of the navigator so
that the event doesn't pass through to the canvas.
- Removed `stopPropagation` and `preventDefault` calls in
`NavigatorRowClickableWrapper` so that the event can still trigger
dragging.
---
 .../components/canvas/design-panel-root.tsx   | 34 ++++++++---------
 .../src/components/context-menu-wrapper.tsx   | 12 +++++-
 ...spector-end-to-end-tests.spec.browser2.tsx |  8 ++--
 .../components/inspector/section-header.tsx   |  2 +-
 .../component-section/component-section.tsx   |  4 +-
 .../header-section/target-selector.tsx        |  4 +-
 .../layout-section/list-source-cartouche.tsx  | 13 ++++---
 .../components/navigator/left-pane/index.tsx  | 34 ++++++++---------
 .../navigator-condensed-entry.tsx             | 12 +++---
 .../navigator-item-clickable-wrapper.tsx      | 17 ++++-----
 .../navigator-item-components.tsx             | 37 +++++++++----------
 .../navigator-item/navigator-item.tsx         | 29 ++++++++-------
 ...nent-picker-context-menu.spec.browser2.tsx |  9 +++--
 .../navigator/navigator.spec.browser2.tsx     |  9 +++--
 editor/src/components/navigator/navigator.tsx |  5 ++-
 15 files changed, 122 insertions(+), 107 deletions(-)

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 13d381968d01..d9f877e33fc3 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -134,7 +134,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
   )
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: RightMenuTab) => {
       const actions: Array<EditorAction> = [EditorActions.setRightMenuTab(menuTab)]
       if (isCommentMode(editorModeRef.current) && menuTab !== RightMenuTab.Comments) {
@@ -145,21 +145,21 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     [dispatch, editorModeRef],
   )
 
-  const onClickInsertTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Insert)
-  }, [onClickTab])
+  const onMouseDownInsertTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Insert)
+  }, [onMouseDownTab])
 
-  const onClickCommentsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Comments)
-  }, [onClickTab])
+  const onMouseDownCommentsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Comments)
+  }, [onMouseDownTab])
 
-  const onClickInspectorTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Inspector)
-  }, [onClickTab])
+  const onMouseDownInspectorTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Inspector)
+  }, [onMouseDownTab])
 
-  const onClickSettingsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Settings)
-  }, [onClickTab])
+  const onMouseDownSettingsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Settings)
+  }, [onMouseDownTab])
 
   const canComment = useCanComment()
 
@@ -200,7 +200,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
-            onClick={onClickInspectorTab}
+            onMouseDown={onMouseDownInspectorTab}
           />
           {when(
             allowedToEdit,
@@ -210,7 +210,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
                 <MenuTab
                   label={'Insert'}
                   selected={selectedTab === RightMenuTab.Insert}
-                  onClick={onClickInsertTab}
+                  onMouseDown={onMouseDownInsertTab}
                 />,
               )}
             </>,
@@ -221,13 +221,13 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
               testId='comments-tab'
               label={'Comments'}
               selected={selectedTab === RightMenuTab.Comments}
-              onClick={onClickCommentsTab}
+              onMouseDown={onMouseDownCommentsTab}
             />,
           )}
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
-            onClick={onClickSettingsTab}
+            onMouseDown={onMouseDownSettingsTab}
           />
         </FlexRow>
         <SimpleFlexRow
diff --git a/editor/src/components/context-menu-wrapper.tsx b/editor/src/components/context-menu-wrapper.tsx
index 42af87678d63..98e2b054ce04 100644
--- a/editor/src/components/context-menu-wrapper.tsx
+++ b/editor/src/components/context-menu-wrapper.tsx
@@ -155,8 +155,18 @@ export const ContextMenu = <T,>({ dispatch, getData, id, items }: ContextMenuPro
     [getData, dispatch, isDisabled, isHidden],
   )
 
+  const onMouseDown = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+  }, [])
+
   return (
-    <Menu key={id} id={id} animation={false} onVisibilityChange={onVisibilityChange}>
+    <Menu
+      key={id}
+      id={id}
+      animation={false}
+      onVisibilityChange={onVisibilityChange}
+      onMouseDown={onMouseDown}
+    >
       {splitItems.map((item, index) => {
         if (item?.type === 'submenu') {
           return (
diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
index 3d9e79541755..bfbeb21cdc95 100644
--- a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
+++ b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -1479,12 +1479,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
@@ -1586,12 +1586,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
index 1887359b8cd5..77719edac898 100644
--- a/editor/src/components/inspector/section-header.tsx
+++ b/editor/src/components/inspector/section-header.tsx
@@ -19,7 +19,7 @@ export function InspectorSectionHeader({
         padding: 8,
         cursor: 'pointer',
       }}
-      onClick={toggle}
+      onMouseDown={toggle}
       data-testid={`section-header-${title}`}
     >
       <div
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 9fe1916b5d88..0db2eb8dd325 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1189,7 +1189,7 @@ interface ObjectIndicatorProps {
 const ObjectIndicator = (props: ObjectIndicatorProps) => {
   return (
     <div
-      onClick={props.toggle}
+      onMouseDown={props.toggle}
       style={{
         border: `1px solid ${colorTheme.bg3.value}`,
         paddingLeft: 2,
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight onClick={toggleSection}>
+        <SquareButton highlight onMouseDown={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible
diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
index 84a1e19dcc29..93115475a56b 100644
--- a/editor/src/components/inspector/sections/header-section/target-selector.tsx
+++ b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -408,10 +408,10 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         Target
       </H1>
       <SectionActionSheet className='actionsheet'>
-        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
+        <SquareButton highlight disabled={isAdding} onMouseDown={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onClick={togglePathPanel}>
+        <SquareButton highlight onMouseDown={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible
diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 831a8b20f88d..4771e65af340 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -100,11 +100,14 @@ const MapListSourceCartoucheInner = React.memo(
     const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
       useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
 
-    const onClick = React.useCallback(() => {
-      if (openOn === 'single-click') {
-        openPopup()
-      }
-    }, [openOn, openPopup])
+    const onClick = React.useCallback(
+      (e: React.MouseEvent) => {
+        if (openOn === 'single-click') {
+          openPopup()
+        }
+      },
+      [openOn, openPopup],
+    )
 
     const onDoubleClick = React.useCallback(() => {
       if (openOn === 'double-click') {
diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
index 286bf18cbbe5..8babed005899 100644
--- a/editor/src/components/navigator/left-pane/index.tsx
+++ b/editor/src/components/navigator/left-pane/index.tsx
@@ -48,7 +48,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
 
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: LeftMenuTab) => {
       let actions: Array<EditorAction> = []
       actions.push(setLeftMenuTab(menuTab))
@@ -57,21 +57,21 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     [dispatch],
   )
 
-  const onClickPagesTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Pages)
-  }, [onClickTab])
+  const onMouseDownPagesTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Pages)
+  }, [onMouseDownTab])
 
-  const onClickProjectTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Project)
-  }, [onClickTab])
+  const onMouseDownProjectTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Project)
+  }, [onMouseDownTab])
 
-  const onClickNavigatorTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Navigator)
-  }, [onClickTab])
+  const onMouseDownNavigatorTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Navigator)
+  }, [onMouseDownTab])
 
-  const onClickGithubTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Github)
-  }, [onClickTab])
+  const onMouseDownGithubTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Github)
+  }, [onMouseDownTab])
 
   const isMyProject = useIsMyProject()
 
@@ -126,23 +126,23 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
                 <MenuTab
                   label={'Pages'}
                   selected={selectedTab === LeftMenuTab.Pages}
-                  onClick={onClickPagesTab}
+                  onMouseDown={onMouseDownPagesTab}
                 />,
               )}
               <MenuTab
                 label={'Navigator'}
                 selected={selectedTab === LeftMenuTab.Navigator}
-                onClick={onClickNavigatorTab}
+                onMouseDown={onMouseDownNavigatorTab}
               />
               <MenuTab
                 label={'Project'}
                 selected={selectedTab === LeftMenuTab.Project}
-                onClick={onClickProjectTab}
+                onMouseDown={onMouseDownProjectTab}
               />
               <MenuTab
                 label={'Github'}
                 selected={selectedTab === LeftMenuTab.Github}
-                onClick={onClickGithubTab}
+                onMouseDown={onMouseDownGithubTab}
               />
             </FlexRow>,
           )}
diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
index 60f9e0afce4e..6f208b183679 100644
--- a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -20,7 +20,7 @@ import { LayoutIcon } from './layout-icon'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
 import {
   NavigatorRowClickableWrapper,
-  useGetNavigatorClickActions,
+  useGetNavigatorMouseDownActions,
 } from './navigator-item-clickable-wrapper'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
@@ -341,18 +341,18 @@ const CondensedEntryItemContent = React.memo(
       ])
     }, [props.entry, dispatch, highlightedViews])
 
-    const getClickActions = useGetNavigatorClickActions(
+    const getMouseDownActions = useGetNavigatorMouseDownActions(
       props.entry.elementPath,
       props.selected,
       condensedNavigatorRow([props.entry], 'leaf', props.indentation),
     )
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
-        dispatch(getClickActions(e))
+        dispatch(getMouseDownActions(e))
       },
-      [dispatch, getClickActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
@@ -374,7 +374,7 @@ const CondensedEntryItemContent = React.memo(
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
-        onClick={onClick}
+        onMouseDown={onMouseDown}
       >
         <div
           style={{
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
index 8b1deca408b7..856a766f22f8 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
@@ -46,21 +46,18 @@ export const NavigatorRowClickableWrapper = React.memo(
       return selectedViews.current.some((view) => EP.pathsEqual(targetPath, view))
     }, [selectedViews, targetPath])
 
-    const getActions = useGetNavigatorClickActions(targetPath, selected, props.row)
+    const getMouseDownActions = useGetNavigatorMouseDownActions(targetPath, selected, props.row)
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
-        e.stopPropagation()
-        e.preventDefault()
-
-        const actions = getActions(e)
+        const actions = getMouseDownActions(e)
         dispatch(actions)
       },
-      [dispatch, getActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onClick={onClick}>
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onMouseDown={onMouseDown}>
         {props.children}
       </div>
     )
@@ -68,11 +65,11 @@ export const NavigatorRowClickableWrapper = React.memo(
 )
 NavigatorRowClickableWrapper.displayName = 'NavigatorRowClickableWrapper'
 
-export function useGetNavigatorClickActions(
+export function useGetNavigatorMouseDownActions(
   targetPath: ElementPath,
   selected: boolean,
   row: NavigatorRow,
-) {
+): (event: React.MouseEvent) => Array<EditorAction> {
   const navigatorTargets = useRefEditorState(navigatorTargetsSelector)
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
   const collapsedViews = useRefEditorState((store) => store.editor.navigator.collapsedViews)
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
index 3fe002f4ea84..1686b791019d 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
@@ -180,7 +180,7 @@ interface VisiblityIndicatorProps {
   visibilityEnabled: boolean
   selected: boolean
   iconColor: IcnProps['color']
-  onClick: () => void
+  onMouseDown: () => void
 }
 
 export const VisibilityIndicator: React.FunctionComponent<
@@ -190,7 +190,7 @@ export const VisibilityIndicator: React.FunctionComponent<
 
   return (
     <Button
-      onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -228,7 +228,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
     'AddChildButton supportsChildren',
   )
 
-  const onClick = useCreateCallbackToShowComponentPicker()(
+  const onMouseDown = useCreateCallbackToShowComponentPicker()(
     [target],
     EditorActions.insertAsChildTarget(),
   )
@@ -239,7 +239,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
 
   return (
     <Button
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -292,12 +292,12 @@ const ReplaceElementButton = React.memo((props: ReplaceElementButtonProps) => {
     }
   })()
 
-  const onClick = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
+  const onMouseDown = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
 
   return (
     <Button
       data-testid={ReplaceElementButtonTestId(target, prop)}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -320,37 +320,36 @@ interface SelectionLockedIndicatorProps {
   selected: boolean
   iconColor: IcnProps['color']
   isDescendantOfLocked: boolean
-  onClick: (value: SelectionLocked) => void
+  onMouseDown: (value: SelectionLocked) => void
 }
 
 export const SelectionLockedIndicator: React.FunctionComponent<
   React.PropsWithChildren<SelectionLockedIndicatorProps>
 > = React.memo((props) => {
-  const { shouldShow, value, selected, iconColor, isDescendantOfLocked, onClick } = props
+  const { shouldShow, value, iconColor, isDescendantOfLocked, onMouseDown } = props
   const color = iconColor
 
-  const handleClick = React.useCallback(
+  const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.stopPropagation()
       switch (value) {
         case 'selectable':
-          onClick('locked-hierarchy')
+          onMouseDown('locked-hierarchy')
           break
         case 'locked-hierarchy':
-          onClick('locked')
+          onMouseDown('locked')
           break
         case 'locked':
         default:
-          onClick('selectable')
+          onMouseDown('selectable')
           break
       }
     },
-    [onClick, value],
+    [onMouseDown, value],
   )
   return (
     <Button
-      onClick={handleClick}
-      onMouseDown={stopPropagation}
+      onMouseDown={handleMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -474,7 +473,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
     props.navigatorEntry.elementPath,
   )
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       event.stopPropagation()
       dispatch([EditorActions.toggleCollapse(navigatorEntry.elementPath)])
@@ -539,7 +538,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             isDescendantOfLocked={isDescendantOfLocked}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleSelectable}
+            onMouseDown={toggleSelectable}
           />
           <VisibilityIndicator
             key={`visibility-indicator-${varSafeNavigatorEntryToKey(navigatorEntry)}`}
@@ -549,7 +548,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             visibilityEnabled={props.isVisibleOnCanvas}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleHidden}
+            onMouseDown={toggleHidden}
           />
         </>,
       )}
@@ -560,7 +559,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
           visible={true}
           collapsed={props.collapsed}
           selected={props.selected}
-          onClick={collapse}
+          onMouseDown={toggleCollapse}
           style={{
             opacity: 'var(--paneHoverOpacity)',
           }}
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index bc951931c96a..a39e4af8276f 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -650,7 +650,7 @@ export const NavigatorItem: React.FunctionComponent<
     return elementWarnings.invalidGroup != null || elementWarnings.invalidGroupChild != null
   }, [elementWarnings])
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       collapseItem(dispatch, navigatorEntry.elementPath, event)
       event.stopPropagation()
@@ -744,13 +744,16 @@ export const NavigatorItem: React.FunctionComponent<
 
   const currentlyRenaming = EP.pathsEqual(props.renamingTarget, props.navigatorEntry.elementPath)
 
-  const onClick = React.useCallback(
+  const onMouseDown = React.useCallback(
     (e: React.MouseEvent) => {
-      if (isRenderPropNavigatorEntry(navigatorEntry)) {
-        e.stopPropagation()
-      }
+      // Only do this for a left mouse down.
+      if (e.button === 0) {
+        if (isRenderPropNavigatorEntry(navigatorEntry)) {
+          e.stopPropagation()
+        }
 
-      contextMenu.hideAll()
+        contextMenu.hideAll()
+      }
     },
     [navigatorEntry],
   )
@@ -771,7 +774,7 @@ export const NavigatorItem: React.FunctionComponent<
       row={regularNavigatorRow(props.navigatorEntry, props.indentation)}
     >
       <div
-        onClick={onClick}
+        onMouseDown={onMouseDown}
         style={{
           flex: 1,
           borderRadius: 5,
@@ -859,7 +862,7 @@ export const NavigatorItem: React.FunctionComponent<
                     visible={canBeExpanded}
                     collapsed={collapsed}
                     selected={selected && !isInsideComponent}
-                    onClick={collapse}
+                    onMouseDown={toggleCollapse}
                     style={{
                       opacity: 'var(--paneHoverOpacity)',
                     }}
@@ -935,7 +938,7 @@ const RenderPropSlot = React.memo((props: RenderPropSlotProps) => {
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -964,7 +967,7 @@ const ConditionalBranchSlot = React.memo((props: ConditionalBranchSlotProps) =>
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -977,17 +980,17 @@ interface PlaceholderSlotProps {
   parentOutline: ParentOutline
   cursor?: 'pointer' | 'inherit'
   testId?: string
-  onClick?: React.MouseEventHandler
+  onMouseDown?: React.MouseEventHandler
 }
 
 const PlaceholderSlot = React.memo((props: PlaceholderSlotProps) => {
-  const { label, parentOutline, cursor, testId, onClick } = props
+  const { label, parentOutline, cursor, testId, onMouseDown } = props
   const colorTheme = useColorTheme()
 
   return (
     <div
       key={`label-${label}-slot`}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         width: 140,
         height: 19,
diff --git a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
index 9ad51dcbb489..7571a2ad0090 100644
--- a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
@@ -19,6 +19,7 @@ import {
 import * as EP from '../../../core/shared/element-path'
 import {
   mouseClickAtPoint,
+  mouseDownAtPoint,
   mouseMoveToPoint,
   pressKey,
 } from '../../canvas/event-helpers.test-utils'
@@ -544,7 +545,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const flexRowRow = editor.renderedDOM.queryByTestId(
       labelTestIdForComponentIcon('FlexRow', '/src/utils', 'row'),
@@ -718,7 +719,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('FlexCol'))
     await mouseClickAtPoint(menuButton, { x: 3, y: 3 })
@@ -897,7 +898,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const submenuButton = await waitFor(() => editor.renderedDOM.getByText('FlexRow'))
     await mouseMoveToPoint(submenuButton, { x: 3, y: 3 })
@@ -1197,7 +1198,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:pg_root/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
     await editor.getDispatchFollowUpActionsFinished()
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('Flex Hello'))
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index e8911f87814c..fd27a18b0ebb 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -29,6 +29,7 @@ import {
   dragElementWithDNDEvents,
   mouseClickAtPoint,
   mouseDoubleClickAtPoint,
+  mouseDownAtPoint,
   pressKey,
 } from '../canvas/event-helpers.test-utils'
 import { NavigatorItemTestId } from './navigator-item/navigator-item'
@@ -5226,7 +5227,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('(empty)'),
@@ -5272,7 +5273,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Span with Title'),
@@ -5308,7 +5309,7 @@ describe('Navigator', () => {
         'regular-sb/scene/pg:dbc/78c/d93',
       ])
     })
-    it('can insert an third-party component into render prop', async () => {
+    it('can insert a third-party component into render prop', async () => {
       const renderResult = await renderTestEditorWithModel(
         projectWithThirdPartyRenderProp(''), // <- no render prop
         'await-first-dom-report',
@@ -5318,7 +5319,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Heading with Title'),
diff --git a/editor/src/components/navigator/navigator.tsx b/editor/src/components/navigator/navigator.tsx
index a889f6c6c3e8..2b10408294d5 100644
--- a/editor/src/components/navigator/navigator.tsx
+++ b/editor/src/components/navigator/navigator.tsx
@@ -286,8 +286,9 @@ export const NavigatorComponent = React.memo(() => {
     }
   }
 
-  const containerClick = React.useCallback(
+  const onMouseDown = React.useCallback(
     (mouseEvent: React.MouseEvent<HTMLElement>) => {
+      mouseEvent.stopPropagation()
       // Ensure this is a left click.
       if (mouseEvent.button === 0) {
         dispatch([clearSelection()])
@@ -319,7 +320,7 @@ export const NavigatorComponent = React.memo(() => {
         padding: 5,
         height: 0,
       }}
-      onClick={containerClick}
+      onMouseDown={onMouseDown}
     >
       <SectionBodyArea
         minimised={minimised}