From 1cafd1e421f41683668dd6ed8fc2353ae5f56507 Mon Sep 17 00:00:00 2001
From: Joakim Bjerknes <joakbjerk@gmail.com>
Date: Mon, 18 Nov 2024 10:00:30 +0100
Subject: [PATCH] chore(Field.Date): add docs example on how to enable auto
 close (#4287)

---
 .../extensions/forms/feature-fields/Date/Examples.tsx     | 8 ++++++++
 .../uilib/extensions/forms/feature-fields/Date/demos.mdx  | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx
index d69621c62d7..b41277a184c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx
@@ -90,3 +90,11 @@ export const Range = () => {
     </ComponentBox>
   )
 }
+
+export const AutoClose = () => {
+  return (
+    <ComponentBox>
+      <Field.Date label="Automatically Close" showCancelButton={false} />
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx
index 77f7380dc9a..8dbbf157951 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx
@@ -18,6 +18,14 @@ import * as Examples from './Examples'
 
 <Examples.Range />
 
+### Automatically close picker
+
+The calendar will be prevented from automatically closing when the submit or cancel buttons are visible, to ensure that the user is actually able to interact with them after date selection.
+
+To enable the picker to close automatically, you have to set `showCancelButton` to `false`, to override the default behaviour.
+
+<Examples.AutoClose />
+
 ### With help
 
 <Examples.WithHelp />