diff --git a/.changeset/forty-rules-ring.md b/.changeset/forty-rules-ring.md new file mode 100644 index 0000000000..52b978b4e9 --- /dev/null +++ b/.changeset/forty-rules-ring.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Combobox: Only open dropdown-list onClick, not onFocus. diff --git a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx index ba8dc603f2..96f5858ab3 100644 --- a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx +++ b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx @@ -32,7 +32,6 @@ const ComboboxWrapper = ({ !wrapperRef.current?.contains(event.relatedTarget) && toggleOpenButtonRef?.current !== event.target ) { - toggleIsListOpen(true); setHasFocusWithin(true); } } diff --git a/@navikt/core/react/src/form/combobox/Input/InputController.tsx b/@navikt/core/react/src/form/combobox/Input/InputController.tsx index 87965af770..378c5b8111 100644 --- a/@navikt/core/react/src/form/combobox/Input/InputController.tsx +++ b/@navikt/core/react/src/form/combobox/Input/InputController.tsx @@ -33,6 +33,7 @@ export const InputController = forwardRef< toggleListButton = true, inputClassName, shouldShowSelectedOptions = true, + ...rest } = props; @@ -45,7 +46,7 @@ export const InputController = forwardRef< readOnly, } = useInputContext(); - const { activeDecendantId } = useFilteredOptionsContext(); + const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext(); const { selectedOptions } = useSelectedOptionsContext(); const mergedInputRef = useMergeRefs(inputRef, ref); @@ -57,7 +58,14 @@ export const InputController = forwardRef< "navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== undefined, })} - onClick={focusInput} + onClick={() => { + if (inputProps.disabled || readOnly) { + return; + } + + toggleIsListOpen(true); + focusInput(); + }} > {!shouldShowSelectedOptions ? (