From 2f3b6e68c421091c409d60a2f8e594e0f59d35ca Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 07:26:46 +0200
Subject: [PATCH 1/2] fix: highlight scatter axes on facet inputs focus

---
 app/components/Compare/FacetScatterChart.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 79e29b484..1bee1836c 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -310,7 +310,8 @@ function toggleAxisHighlight(state: AxisHighlight) {
           @change="step += 1"
           @mouseenter="toggleAxisHighlight('x')"
           @mouseleave="toggleAxisHighlight(null)"
-          @blur="toggleAxisHighlight(null)"
+          @focusin="toggleAxisHighlight('x')"
+          @focusout="toggleAxisHighlight(null)"
         />
         <SelectField
           class="w-full"
@@ -322,8 +323,9 @@ function toggleAxisHighlight(state: AxisHighlight) {
           block
           @change="step += 1"
           @mouseenter="toggleAxisHighlight('y')"
-          @mouseleave="toggleAxisHighlight(null)"
-          @blur="toggleAxisHighlight(null)"
+          @focus="toggleAxisHighlight('y')"
+          @focusin="toggleAxisHighlight('y')"
+          @focusout="toggleAxisHighlight(null)"
         />
       </div>
 

From 79220f265156309c5f1aa1b6248251ea5d4394fc Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 07:45:08 +0200
Subject: [PATCH 2/2] fix: add missing mouseleave

---
 app/components/Compare/FacetScatterChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 1bee1836c..a0de43bb2 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -323,7 +323,7 @@ function toggleAxisHighlight(state: AxisHighlight) {
           block
           @change="step += 1"
           @mouseenter="toggleAxisHighlight('y')"
-          @focus="toggleAxisHighlight('y')"
+          @mouseleave="toggleAxisHighlight(null)"
           @focusin="toggleAxisHighlight('y')"
           @focusout="toggleAxisHighlight(null)"
         />