diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css index 2c364efa91b..4786d5a21d4 100644 --- a/@navikt/core/css/form/combobox.css +++ b/@navikt/core/css/form/combobox.css @@ -256,7 +256,7 @@ } .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)); @@ -264,7 +264,7 @@ } .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 index 583154c92c0..ef94a969407 100644 --- 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 && (
  • { + 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 index df0635af47f..2e3a9a2bdc5 100644 --- 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>; 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 index d4fbafb5209..8125336d838 100644 --- 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( moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, + setIsMouseLastUsedInputDevice, shouldAutocomplete, } = useFilteredOptionsContext(); @@ -102,6 +103,7 @@ const Input = forwardRef( const handleKeyDown = useCallback( (e) => { + setIsMouseLastUsedInputDevice(false); if (e.key === "Backspace") { if (value === "") { const lastSelectedOption = @@ -132,6 +134,7 @@ const Input = forwardRef( isListOpen, filteredOptionsIndex, moveFocusUp, + setIsMouseLastUsedInputDevice, ] ); diff --git a/yarn.lock b/yarn.lock index 3c3f2dcf926..1077c2cf324 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3351,7 +3351,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^5.0.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^5.0.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3378,8 +3378,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^5.0.1 - "@navikt/ds-tokens": ^5.0.1 + "@navikt/ds-css": ^5.0.2 + "@navikt/ds-tokens": ^5.0.2 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -3396,7 +3396,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 5.0.1 + "@navikt/ds-css": 5.0.2 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -3420,11 +3420,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@5.0.1, @navikt/ds-css@^5.0.1, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@5.0.2, @navikt/ds-css@^5.0.2, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^5.0.1 + "@navikt/ds-tokens": ^5.0.2 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3437,12 +3437,12 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@5.0.1, @navikt/ds-react@^5.0.1, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@5.0.2, @navikt/ds-react@^5.0.2, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.24.1 - "@navikt/aksel-icons": ^5.0.1 + "@navikt/aksel-icons": ^5.0.2 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3476,11 +3476,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^5.0.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^5.0.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^5.0.1 + "@navikt/ds-tokens": ^5.0.2 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3491,7 +3491,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^5.0.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^5.0.2, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8033,11 +8033,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^5.0.1 - "@navikt/ds-css": ^5.0.1 - "@navikt/ds-react": ^5.0.1 - "@navikt/ds-tailwind": ^5.0.1 - "@navikt/ds-tokens": ^5.0.1 + "@navikt/aksel-icons": ^5.0.2 + "@navikt/ds-css": ^5.0.2 + "@navikt/ds-react": ^5.0.2 + "@navikt/ds-tailwind": ^5.0.2 + "@navikt/ds-tokens": ^5.0.2 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -22026,8 +22026,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 5.0.1 - "@navikt/ds-react": 5.0.1 + "@navikt/ds-css": 5.0.2 + "@navikt/ds-react": 5.0.2 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^3.1.0