Bugfix/prevent submit on enter in combobox

.changeset/rotten-windows-cover.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Preventing "enter" while Combobox is focused from submitting form

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

@@ -97,9 +97,17 @@ export const FilteredOptionsProvider = ({
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
             ? toComboboxOption(value)
             : undefined,
+          ...customOptions.reduce(
+            (acc, customOption) => ({
+              ...acc,
+              [filteredOptionsUtils.getOptionId(id, customOption.label)]:
+                customOption,
+            }),
+            {},
+          ),
         },
       ),
-    [allowNewValues, id, options, value],
+    [allowNewValues, customOptions, id, options, value],
   );
 
   useClientLayoutEffect(() => {

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

@@ -128,6 +128,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               removeSelectedOption(lastSelectedOption);
             }
           }
+        } else if (e.key === "Enter" || e.key === "Accept") {
+          if (activeDecendantId || value) {
+            e.preventDefault();
+          }
         } else if (e.key === "ArrowDown") {
           // Check that cursor position is at the end of the input field,
           // so we don't interfere with text editing

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Chips } from "../../../chips";
+import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import { ComboboxOption } from "../types";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
@@ -13,13 +14,20 @@ interface SelectedOptionsProps {
 const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput } = useInputContext();
+  const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
 
   const onClick = (e) => {
     e.stopPropagation();
     removeSelectedOption(option);
     focusInput();
   };
 
+  const onFocus = () => {
+    if (isListOpen) {
+      toggleIsListOpen(false);
+    }
+  };
+
   if (!isMultiSelect) {
     return (
       <div className="navds-combobox__selected-options--no-bg">
@@ -28,7 +36,11 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>;
+  return (
+    <Chips.Removable onClick={onClick} onFocus={onFocus}>
+      {option.label}
+    </Chips.Removable>
+  );
 };
 
 const SelectedOptions: React.FC<SelectedOptionsProps> = ({

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

@@ -448,6 +448,8 @@ export const RemoveSelectedMultiSelectTest: StoryObject = {
     await sleep(250);
     userEvent.click(appleSlett);
     await sleep(250);
+    userEvent.click(canvas.getByRole("button", { name: "Alternativer" }));
+    await sleep(250);
     const appleOption = canvas.getByRole("option", {
       name: "apple",
       selected: false,
@@ -624,3 +626,71 @@ export const TestHoverAndFocusSwitching: StoryObject = {
     );
   },
 };
+
+export const TestEnterNotSubmittingForm: StoryObj<{
+  onSubmit: ReturnType<typeof fn>;
+}> = {
+  args: {
+    onSubmit: fn(),
+  },
+  render: ({ onSubmit }) => {
+    return (
+      <form action="https://www.aksel.nav.no" method="get" onSubmit={onSubmit}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          isMultiSelect
+          allowNewValues
+        />
+      </form>
+    );
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onSubmit.mockClear();
+    const canvas = within(canvasElement);
+    const waitTime = 0; // Change for debugging
+
+    await sleep(waitTime);
+
+    const getInput = () =>
+      canvas.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+    const getOption = (name: string, selected: boolean) =>
+      canvas.getByRole("option", { name, selected });
+    await userEvent.click(getInput(), { delay: waitTime });
+
+    await userEvent.keyboard("{ArrowDown}", { delay: waitTime });
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      getOption("banana", false).getAttribute("id"),
+    );
+
+    await userEvent.keyboard("{Enter}", { delay: waitTime });
+    expect(args.onSubmit).not.toHaveBeenCalled();
+    expect(getOption("banana", true)).toBeVisible();
+
+    await userEvent.keyboard("{Shift>}{Tab}", { delay: waitTime });
+
+    await userEvent.keyboard("{Enter}", { delay: waitTime });
+    expect(args.onSubmit).not.toHaveBeenCalled();
+
+    await userEvent.keyboard("test"); // Type option that does not exist
+    await userEvent.keyboard("{Enter}", { delay: waitTime });
+    expect(args.onSubmit).not.toHaveBeenCalled();
+
+    await userEvent.keyboard("{ArrowDown}", { delay: waitTime }); // Select "test" custom option
+    expect(
+      canvas.getByRole("option", { name: "test", selected: true }),
+    ).toBeVisible();
+    await userEvent.keyboard("{Enter}", { delay: waitTime }); // De-select "test"
+    expect(
+      canvas.queryByRole("option", { name: "test", selected: false }),
+    ).toBeNull();
+    expect(args.onSubmit).not.toHaveBeenCalled();
+
+    await userEvent.keyboard("{Escape}", { delay: waitTime }); // Clear input field
+    await userEvent.keyboard("{Enter}", { delay: waitTime }); // Enter on empty Input with closed list
+    expect(args.onSubmit).toHaveBeenCalledOnce();
+  },
+};