From ffec1c8004081cd5be7fdf9284dc543699593bf6 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 12 Dec 2024 00:16:27 +0100
Subject: [PATCH] Fix clicking-out Component Browser (#11832)

Fixes #11829

There was implicit `any` on refs, so the typechecker didn't catch missing property.
---
 app/gui/src/project-view/components/ComponentBrowser.vue | 2 --
 app/gui/src/project-view/components/DockPanel.vue        | 4 +---
 app/gui/src/project-view/components/GraphEditor.vue      | 9 +++------
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue
index 2355948580..29bfd8842f 100644
--- a/app/gui/src/project-view/components/ComponentBrowser.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser.vue
@@ -72,8 +72,6 @@ const emit = defineEmits<{
 const cbRoot = ref<HTMLElement>()
 const componentList = ref<ComponentInstance<typeof ComponentList>>()
 
-defineExpose({ cbRoot })
-
 const clickOutsideAssociatedElements = (e: PointerEvent) => {
   return props.associatedElements.length === 0 ?
       false
diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 3a217c129e..68ee38c525 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -24,8 +24,6 @@ const props = defineProps<{
 }>()
 
 const slideInPanel = ref<HTMLElement>()
-const root = ref<HTMLElement>()
-defineExpose({ root })
 
 const computedSize = useResizeObserver(slideInPanel)
 const computedBounds = computed(() => new Rect(Vec2.Zero, computedSize.value))
@@ -48,7 +46,7 @@ const tabStyle = {
 </script>
 
 <template>
-  <div ref="root" class="DockPanel" data-testid="rightDockRoot">
+  <div class="DockPanel" data-testid="rightDockRoot">
     <ToggleIcon
       v-model="show"
       :title="`Documentation Panel (${documentationEditorBindings.bindings.toggle.humanReadable})`"
diff --git a/app/gui/src/project-view/components/GraphEditor.vue b/app/gui/src/project-view/components/GraphEditor.vue
index dfefc96922..e6fc1a97d3 100644
--- a/app/gui/src/project-view/components/GraphEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor.vue
@@ -456,13 +456,10 @@ watch(
   },
 )
 
-const componentBrowser = ref()
-const docPanel = ref()
+const componentBrowser = ref<ComponentInstance<typeof ComponentBrowser>>()
+const docPanel = ref<ComponentInstance<typeof RightDockPanel>>()
 
-const componentBrowserElements = computed(() => [
-  componentBrowser.value?.cbRoot,
-  docPanel.value?.root,
-])
+const componentBrowserElements = computed(() => [componentBrowser.value?.$el, docPanel.value?.$el])
 
 // === Node Creation ===