Merge 40ad33a into 5a649d2

navikt · Nov 2, 2023 · 4abe659 · 4abe659
2 parents 5a649d2 + 40ad33a
commit 4abe659
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 38 deletions.
diff --git a/.changeset/fluffy-queens-sell.md b/.changeset/fluffy-queens-sell.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Datepicker lukker ikke lenger modalen den er i
diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
@@ -437,28 +437,36 @@ export const ModalDemo = () => {
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
   });
+  const [open, setOpen] = useState(true);
 
   return (
-    <Modal open header={{ heading: "Modal-demo" }}>
-      <Modal.Body style={{ position: "relative" }}>
-        <BodyLong spacing>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-        </BodyLong>
-
-        <DatePicker {...datepickerProps} dropdownCaption>
-          <DatePicker.Input
-            {...inputProps}
-            label="Velg dato"
-            description="Format: dd.mm.yyyy"
-          />
-        </DatePicker>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button>Neste</Button>
-        <Button variant="secondary">Tilbake</Button>
-        <Button variant="tertiary">Avbryt</Button>
-      </Modal.Footer>
-    </Modal>
+    <>
+      <Button onClick={() => setOpen(!open)}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        header={{ heading: "Modal-demo" }}
+      >
+        <Modal.Body style={{ position: "relative" }}>
+          <BodyLong spacing>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          </BodyLong>
+
+          <DatePicker {...datepickerProps} dropdownCaption>
+            <DatePicker.Input
+              {...inputProps}
+              label="Velg dato"
+              description="Format: dd.mm.yyyy"
+            />
+          </DatePicker>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button>Neste</Button>
+          <Button variant="secondary">Tilbake</Button>
+          <Button variant="tertiary">Avbryt</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
   );
 };
 ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };
diff --git a/@navikt/core/react/src/date/parts/DateWrapper.tsx b/@navikt/core/react/src/date/parts/DateWrapper.tsx
@@ -57,7 +57,10 @@ export const DateWrapper = ({
     <Modal
       ref={modalRef}
       open={open}
-      onClose={onClose}
+      onClose={(event) => {
+        event.stopPropagation();
+        onClose();
+      }}
       aria-label={modalLabel(locale, variant)}
       className={cl("navds-date__modal", {
         "navds-date__nested-modal": isInModal,

diff --git a/yarn.lock b/yarn.lock
@@ -3415,7 +3415,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.8.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.9.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3442,8 +3442,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.8.0
-    "@navikt/ds-tokens": ^5.8.0
+    "@navikt/ds-css": ^5.9.1
+    "@navikt/ds-tokens": ^5.9.1
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3461,7 +3461,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.8.0
+    "@navikt/ds-css": 5.9.1
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3485,11 +3485,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.8.0, @navikt/ds-css@^5.8.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.9.1, @navikt/ds-css@^5.9.1, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.8.0
+    "@navikt/ds-tokens": ^5.9.1
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3502,13 +3502,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^5.8.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.9.1, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.8.0
-    "@navikt/ds-tokens": ^5.8.0
+    "@navikt/aksel-icons": ^5.9.1
+    "@navikt/ds-tokens": ^5.9.1
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3542,11 +3542,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.8.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.9.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.8.0
+    "@navikt/ds-tokens": ^5.9.1
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3557,7 +3557,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.8.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.9.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8438,11 +8438,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.8.0
-    "@navikt/ds-css": ^5.8.0
-    "@navikt/ds-react": ^5.8.0
-    "@navikt/ds-tailwind": ^5.8.0
-    "@navikt/ds-tokens": ^5.8.0
+    "@navikt/aksel-icons": ^5.9.1
+    "@navikt/ds-css": ^5.9.1
+    "@navikt/ds-react": ^5.9.1
+    "@navikt/ds-tailwind": ^5.9.1
+    "@navikt/ds-tokens": ^5.9.1
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft