feat(menu): implement hover to focus behavior and update styling (#315)

TotomInc · web-flow · commit 4f88f5815e68 · 2025-09-08T08:42:23.000+02:00
#312
diff --git a/.cursor/rules/implementing-features-fixes.mdc b/.cursor/rules/implementing-features-fixes.mdc
@@ -54,7 +54,7 @@ Use this checklist for every feature or bug fix. Do not skip steps. Commands ass
 - **Auto-fix**: `npm run lint:fix` (then re-run `npm run lint`).
 
 ### 7. PR readiness checklist
-- Tests added/updated and `npm run test` passes.
+- Tests added/updated and `npm run test` passes. Ensure `npm run test` with Vitest is running smoothly inside Cursor agent (e.g. waiting for user interaction "q to exit" in terminal to resume AI flow).
 - `npm run type-check` passes with zero `@ts-ignore`.
 - New demo added in `playground/` (if new feature) and manually verified via `npm run dev:playground`.
 - `npm run build` completes without errors (no early exit).
diff --git a/docs/styling.md b/docs/styling.md
@@ -57,7 +57,7 @@ For a complete list of CSS variables, we recommend to take a look at the source-
   --vs-option-disabled-text-color: #52525b;
   --vs-option-background-color: var(--vs-menu-background);
   --vs-option-hover-background-color: #dbeafe;
-  --vs-option-focused-background-color: var(--vs-option-hover-background-color);
+  --vs-option-focused-background-color: #dbeafe;
   --vs-option-selected-background-color: #93c5fd;
   --vs-option-disabled-background-color: #f4f4f5;
   --vs-option-opacity-menu-open: 0.4;
diff --git a/src/MenuOption.spec.ts b/src/MenuOption.spec.ts
@@ -1,5 +1,7 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { DATA_KEY } from "./lib/provide-inject";
 import MenuOption from "./MenuOption.vue";
 
 describe("scrolling behavior when option is above viewport", () => {
@@ -159,3 +161,66 @@ describe("keyboard event handling", () => {
     expect(wrapper.emitted("select")).toHaveLength(1);
   });
 });
+
+describe("hover to focus behavior", () => {
+  it("should set focused option when hovered", async () => {
+    const mockSetFocusedOption = vi.fn();
+    const mockData = {
+      setFocusedOption: mockSetFocusedOption,
+      focusedOption: ref(-1),
+      menuOpen: ref(true),
+    };
+
+    const wrapper = mount(MenuOption, {
+      props: {
+        menu: null,
+        index: 2,
+        isFocused: false,
+        isSelected: false,
+        isDisabled: false,
+      },
+      global: {
+        provide: {
+          [DATA_KEY as symbol]: mockData,
+        },
+      },
+    });
+
+    // Trigger mouse enter
+    await wrapper.trigger("mouseenter");
+
+    // Verify setFocusedOption was called with the correct index
+    expect(mockSetFocusedOption).toHaveBeenCalledWith(2);
+    expect(mockSetFocusedOption).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not set focused option when hovered on disabled option", async () => {
+    const mockSetFocusedOption = vi.fn();
+    const mockData = {
+      setFocusedOption: mockSetFocusedOption,
+      focusedOption: ref(-1),
+      menuOpen: ref(true),
+    };
+
+    const wrapper = mount(MenuOption, {
+      props: {
+        menu: null,
+        index: 2,
+        isFocused: false,
+        isSelected: false,
+        isDisabled: true, // Option is disabled
+      },
+      global: {
+        provide: {
+          [DATA_KEY as symbol]: mockData,
+        },
+      },
+    });
+
+    // Trigger mouse enter
+    await wrapper.trigger("mouseenter");
+
+    // Verify setFocusedOption was NOT called
+    expect(mockSetFocusedOption).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/MenuOption.vue b/src/MenuOption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { inject, ref, watch } from "vue";
+import { DATA_KEY } from "./lib/provide-inject";
 
 const props = defineProps<{
   menu: HTMLDivElement | null;
@@ -13,6 +14,14 @@ const emit = defineEmits<{
   (e: "select"): void;
 }>();
 
+const sharedData = inject(DATA_KEY);
+
+const handleMouseEnter = () => {
+  if (!props.isDisabled && sharedData?.setFocusedOption) {
+    sharedData.setFocusedOption(props.index);
+  }
+};
+
 const option = ref<HTMLButtonElement | null>(null);
 
 // Scroll the focused option into view when it's out of the menu's viewport.
@@ -52,6 +61,7 @@ watch(
     :aria-selected="isSelected"
     @click="emit('select')"
     @keydown.enter="emit('select')"
+    @mouseenter="handleMouseEnter"
   >
     <slot />
   </div>
@@ -78,12 +88,7 @@ watch(
   cursor: var(--vs-option-cursor);
 }
 
-.menu-option:hover {
-  background-color: var(--vs-option-hover-background-color);
-  color: var(--vs-option-hover-text-color);
-}
-
-.menu-option.focused {
+.menu-option.focused:not(.selected):not(.disabled) {
   background-color: var(--vs-option-focused-background-color);
   color: var(--vs-option-focused-text-color);
 }
diff --git a/src/Select.vue b/src/Select.vue
@@ -223,6 +223,10 @@ const createOption = () => {
   closeMenu();
 };
 
+const setFocusedOption = (index: number) => {
+  focusedOption.value = index;
+};
+
 const handleInputKeydown = (e: KeyboardEvent) => {
   if (e.key === "Tab") {
     closeMenu();
@@ -250,6 +254,7 @@ provide(DATA_KEY, {
   setOption,
   removeOption,
   createOption,
+  setFocusedOption,
 });
 
 // Expose useful refs and methods for external component control
@@ -469,7 +474,7 @@ watch(
   --vs-option-disabled-text-color: #52525b;
   --vs-option-background-color: var(--vs-menu-background);
   --vs-option-hover-background-color: #dbeafe;
-  --vs-option-focused-background-color: var(--vs-option-hover-background-color);
+  --vs-option-focused-background-color: #dbeafe;
   --vs-option-selected-background-color: #93c5fd;
   --vs-option-disabled-background-color: #f4f4f5;
   --vs-option-opacity-menu-open: 0.4;
diff --git a/src/lib/provide-inject.ts b/src/lib/provide-inject.ts
@@ -32,6 +32,7 @@ export type DataInjection<GenericOption extends Option<OptionValue>, OptionValue
   setOption: (option: GenericOption) => void;
   removeOption: (option: GenericOption) => void;
   createOption: () => void;
+  setFocusedOption: (index: number) => void;
 };
 
 export const PROPS_KEY = Symbol("props") as InjectionKey<Props<any, any>>;
