chore(Field.Date): add docs example on how to enable auto close (#4287)

dnbexperience · Nov 18, 2024 · 1cafd1e · 1cafd1e
1 parent 6a3765b
commit 1cafd1e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/...dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx b/...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/...ign-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx b/...ign-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 />