Move movements should "take over" from keyboard focus in Combobox dro…

…pdown list, and vice versa, acting like a native select. Fixes #2165
navikt · Aug 23, 2023 · 8c8b07b · 8c8b07b
1 parent 6fcbb72
commit 8c8b07b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/@navikt/core/css/form/combobox.css b/@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);
 }

diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@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))

diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx b/@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,

diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@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,
       ]
     );