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( (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(); - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false); return ( -
+
@@ -57,10 +57,12 @@ export const Default = (props: any) => { {...props} open={props.open ?? open} anchorEl={anchorEl} - onClose={(e) => setOpen(e)} + onClose={() => setOpen(false)} > Velit in consequat +   +
); };