From 5cd1a6d86a610f27d588f011eca2da291e5db3c7 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Date: Tue, 28 Nov 2023 16:18:40 +0100
Subject: [PATCH] =?UTF-8?q?:bug:=20Popover:=20Ikke=20lukk=20ved=20klikk=20?=
 =?UTF-8?q?inni=20n=C3=A5r=20parent=20er=20fokuserbar=20(#2521)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/four-plums-destroy.md                   |  5 +++++
 @navikt/core/react/src/popover/Popover.tsx         |  5 +++--
 @navikt/core/react/src/popover/popover.stories.tsx | 10 ++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/four-plums-destroy.md

diff --git a/.changeset/four-plums-destroy.md b/.changeset/four-plums-destroy.md
new file mode 100644
index 0000000000..1c998ef306
--- /dev/null
+++ b/.changeset/four-plums-destroy.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Popover: Ikke lukk ved klikk inni når parent er fokuserbar
diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx
index 1b0e850252..749e47bdfe 100644
--- a/@navikt/core/react/src/popover/Popover.tsx
+++ b/@navikt/core/react/src/popover/Popover.tsx
@@ -184,9 +184,10 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         (e: FocusEvent) => {
           if (
             e.target instanceof HTMLElement &&
-            ![anchorEl, refs?.floating?.current].some((element) =>
+            ![anchorEl, refs.floating.current].some((element) =>
               element?.contains(e.target as Node)
-            )
+            ) &&
+            !e.target.contains(refs.floating.current)
           ) {
             open && onClose();
           }
diff --git a/@navikt/core/react/src/popover/popover.stories.tsx b/@navikt/core/react/src/popover/popover.stories.tsx
index 8182fa8d49..6393d9ccdf 100644
--- a/@navikt/core/react/src/popover/popover.stories.tsx
+++ b/@navikt/core/react/src/popover/popover.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Popover } from "../index";
 import { Button } from "../button";
+import { Popover } from "../index";
 
 const placements = [
   "top",
@@ -47,9 +47,9 @@ export default {
 
 export const Default = (props: any) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>();
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div tabIndex={-1}>
       <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
         Open
       </Button>
@@ -57,10 +57,12 @@ export const Default = (props: any) => {
         {...props}
         open={props.open ?? open}
         anchorEl={anchorEl}
-        onClose={(e) => setOpen(e)}
+        onClose={() => setOpen(false)}
       >
         <Popover.Content>Velit in consequat</Popover.Content>
       </Popover>
+      &nbsp;
+      <Button variant="secondary">Another button</Button>
     </div>
   );
 };