From 45627aad1f12828b953b086e5c07a89678f28181 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 26 Jun 2022 16:43:34 -0700
Subject: [PATCH] docs: rename `ComboBox` example, do not open modal in
 `DatePicker` by default (#1374)

* docs(combo-box): "Selected id" -> " Initial selected id"

* docs(date-picker): do not open modal by default to prevent stealing focusing
---
 docs/src/pages/components/ComboBox.svx             |  2 +-
 .../pages/framed/DatePicker/DatePickerModal.svelte | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 46ee62ed..4e7985b1 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -24,7 +24,7 @@ Override the default slot to customize the display of each item. Access the item
 
 <FileSource src="/framed/ComboBox/ComboBoxSlot" />
 
-### Selected id
+### Initial selected id
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
 selectedId="1"
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index af4eb2ad..7b47d312 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -1,12 +1,22 @@
 <script>
-  import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
+  import {
+    Button,
+    Modal,
+    DatePicker,
+    DatePickerInput,
+  } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Select date</Button>
+
 <Modal
-  open
+  bind:open
   modalHeading="Meeting date"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
 >
   <DatePicker datePickerType="single" style="min-height: 420px">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />