Combobox: Pressing Escape in while focusing a Combobox inside a Modal will close the Modal

.changeset/silly-walls-sip.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Prevent Escape in open Combobox from closing Modals

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

@@ -107,10 +107,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.preventDefault();
       switch (e.key) {
-        case "Escape":
-          clearInput(e);
-          toggleIsListOpen(false);
-          break;
         case "Enter":
         case "Accept":
           onEnter(e);
@@ -143,6 +139,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (activeDecendantId || value) {
             e.preventDefault();
           }
+        } else if (e.key === "Escape") {
+          if (isListOpen || value) {
+            e.preventDefault(); // Prevents closing an encasing Modal, as Combobox reacts on keyup.
+            clearInput(e);
+            toggleIsListOpen(false);
+          }
         } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
           /**
            * In case user has an active selection and 'completes' the selection with ArrowLeft or ArrowRight
@@ -177,17 +179,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         }
       },
       [
-        setIsMouseLastUsedInputDevice,
         value,
         selectedOptions,
         removeSelectedOption,
+        isListOpen,
         activeDecendantId,
+        setIsMouseLastUsedInputDevice,
+        clearInput,
+        toggleIsListOpen,
         onChange,
         virtualFocus,
-        isListOpen,
         setValue,
         searchTerm,
-        toggleIsListOpen,
       ],
     );
 

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

@@ -1,7 +1,9 @@
 import { Meta, StoryFn } from "@storybook/react";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../button";
 import { Chips } from "../../chips";
 import { VStack } from "../../layout/stack";
+import { Modal } from "../../modal";
 import { TextField } from "../textfield";
 import { UNSAFE_Combobox } from "./index";
 
@@ -409,6 +411,38 @@ export const WithError: StoryFn = () => {
   );
 };
 
+export const InModal: StoryFn = () => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    modalRef.current?.showModal();
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => modalRef.current?.showModal()}>Åpne modal</Button>
+      <Modal
+        ref={modalRef}
+        header={{ heading: "Overskrift" }}
+        width="medium"
+        style={{ height: "auto" }}
+      >
+        <Modal.Body style={{ height: "100% " }}>
+          <p>
+            Modalen skal ikke lukke seg om man trykker Escape mens virtuelt
+            fokus er i Combobox sin nedtrekksliste eller om inputfeltet
+            inneholder tekst.
+          </p>
+          <UNSAFE_Combobox
+            options={options}
+            label="Hva er dine favorittfrukter?"
+          />
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
 export const Disabled: StoryFn = () => {
   return (
     <UNSAFE_Combobox