Mouse movements should "take over" from keyboard focus in Combobox dropdown list, and vice versa, acting like a native select.

.changeset/tasty-llamas-talk.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering

@navikt/core/css/form/combobox.css

@@ -256,15 +256,15 @@
 }
 
 .navds-combobox__list-item--focus,
-.navds-combobox__list-item:hover {
+.navds-combobox__list--with-hover .navds-combobox__list-item:hover {
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
 .navds-form-field--small .navds-combobox__list-item--focus,
-.navds-form-field--small .navds-combobox__list-item:hover {
+.navds-combobox__list--with-hover .navds-form-field--small .navds-combobox__list-item:hover {
   padding-left: calc(var(--a-spacing-2) - 4px);
 }
 
@@ -277,7 +277,7 @@
 }
 
 .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-.navds-combobox__list-item--selected:hover {
+.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
   background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
   border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
   padding-left: calc(var(--a-spacing-3) - 4px);
@@ -291,7 +291,7 @@
   gap: 0.25rem;
 }
 
-.navds-combobox__list-item__new-option:hover {
+.navds-combobox__list--with-hover .navds-combobox__list-item__new-option:hover {
   border-bottom: 1px solid var(--a-border-divider);
   background: var(--a-surface-neutral-subtle-hover);
 }

@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -19,7 +19,10 @@ const FilteredOptions = () => {
     filteredOptions,
     filteredOptionsIndex,
     filteredOptionsRef,
+    isMouseLastUsedInputDevice,
+    setIsMouseLastUsedInputDevice,
     isValueNew,
+    setFilteredOptionsIndex,
     toggleIsListOpen,
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
@@ -30,6 +33,7 @@ const FilteredOptions = () => {
       ref={filteredOptionsRef}
       className={cl("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
+        "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
       id={`${id}-filtered-options`}
       role="listbox"
@@ -48,6 +52,12 @@ const FilteredOptions = () => {
       {isValueNew && allowNewValues && (
         <li
           tabIndex={-1}
+          onMouseMove={() => {
+            if (filteredOptionsIndex !== -1) {
+              setFilteredOptionsIndex(-1);
+              setIsMouseLastUsedInputDevice(true);
+            }
+          }}
           onPointerUp={(event) => {
             toggleOption(value, event);
             if (!isMultiSelect && !selectedOptions.includes(value))
@@ -90,6 +100,12 @@ const FilteredOptions = () => {
           id={`${id}-option-${option.replace(" ", "-")}`}
           key={option}
           tabIndex={-1}
+          onMouseMove={() => {
+            if (filteredOptionsIndex !== index) {
+              setFilteredOptionsIndex(index);
+              setIsMouseLastUsedInputDevice(true);
+            }
+          }}
           onPointerUp={(event) => {
             toggleOption(option, event);
             if (!isMultiSelect && !selectedOptions.includes(option))

@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -7,6 +7,7 @@ import React, {
   useCallback,
   useRef,
   useLayoutEffect,
+  SetStateAction,
 } from "react";
 import cl from "clsx";
 import { useCustomOptionsContext } from "../customOptionsContext";
@@ -35,6 +36,8 @@ type FilteredOptionsContextType = {
   isListOpen: boolean;
   isLoading?: boolean;
   filteredOptions: string[];
+  isMouseLastUsedInputDevice: boolean;
+  setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
   isValueNew: boolean;
   toggleIsListOpen: (newState?: boolean) => void;
   currentOption: string | null;
@@ -84,6 +87,9 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
 
   const previousSearchTerm = usePrevious(searchTerm);
 
+  const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
+    useState(false);
+
   useLayoutEffect(() => {
     if (
       shouldAutocomplete &&
@@ -246,6 +252,8 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     isListOpen,
     isLoading,
     filteredOptions,
+    isMouseLastUsedInputDevice,
+    setIsMouseLastUsedInputDevice,
     isValueNew,
     toggleIsListOpen,
     currentOption,

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -42,6 +42,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       moveFocusToInput,
       moveFocusToEnd,
       setFilteredOptionsIndex,
+      setIsMouseLastUsedInputDevice,
       shouldAutocomplete,
     } = useFilteredOptionsContext();
 
@@ -102,6 +103,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const handleKeyDown = useCallback(
       (e) => {
+        setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
           if (value === "") {
             const lastSelectedOption =
@@ -132,6 +134,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         isListOpen,
         filteredOptionsIndex,
         moveFocusUp,
+        setIsMouseLastUsedInputDevice,
       ]
     );
 

@navikt/core/react/src/form/combobox/combobox.stories.tsx

@@ -509,3 +509,52 @@ export const TestThatCallbacksOnlyFireWhenExpected = {
     expect(args.onChange.mock.calls).toHaveLength(searchWord.length + 1);
   },
 };
+
+export const TestHoverAndFocusSwitching = {
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          {...props}
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(500);
+
+    const getInput = () =>
+      canvas.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+    userEvent.click(getInput());
+    expect(getInput().getAttribute("aria-expanded")).toEqual("false");
+    expect(getInput().getAttribute("aria-activedescendant")).toBeNull();
+
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    const bananaOption = canvas.getByRole("option", { name: "banana" });
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      bananaOption.getAttribute("id")
+    );
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    const appleOption = canvas.getByRole("option", { name: "apple" });
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      appleOption.getAttribute("id")
+    );
+
+    userEvent.hover(bananaOption);
+    await sleep(250);
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      bananaOption.getAttribute("id")
+    );
+  },
+};