🐛 Timeline Period brakk ved bruk av JSODOM

navikt · Jun 17, 2023 · 42b5af6 · 42b5af6
1 parent 329119f
commit 42b5af6
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 44 deletions.
diff --git a/.changeset/cold-ears-jog.md b/.changeset/cold-ears-jog.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+Fikset jsdom-problemer ved rendring av Timeline
diff --git a/@navikt/core/css/timeline.css b/@navikt/core/css/timeline.css
@@ -61,6 +61,10 @@
   list-style-type: none;
 }
 
+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
 .navds-timeline__period {
   height: 100%;
   border-radius: var(--a-border-radius-full);

diff --git a/@navikt/core/react/src/timeline/Pin.tsx b/@navikt/core/react/src/timeline/Pin.tsx
@@ -11,15 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -83,23 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       [ref, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![
-              refs.reference.current as HTMLButtonElement | null,
-              refs?.floating?.current,
-            ].some((element) => element?.contains(e.target as Node))
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.reference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -140,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,

diff --git a/@navikt/core/react/src/timeline/TimelineRow.tsx b/@navikt/core/react/src/timeline/TimelineRow.tsx
@@ -72,6 +72,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
         >
           <ol
             {...rest}
+            tabIndex={-1}
             ref={ref}
             aria-label={
               periods.length === 0

diff --git a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
@@ -11,9 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -85,23 +85,6 @@ const ClickablePeriod = React.memo(
       [periodRef, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![
-              refs.reference.current as HTMLButtonElement | null,
-              refs?.floating?.current,
-            ].some((element) => element?.contains(e.target as Node))
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.reference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -166,6 +149,10 @@ const ClickablePeriod = React.memo(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,