diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte
index d75918f05..fdd7681a0 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deckoptions/ConfigSelector.svelte
@@ -4,7 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import { getContext } from "svelte";
+    import { modalsKey } from "components/contextKeys";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
+    import type Modal from "bootstrap/js/dist/modal";
 
     import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
@@ -21,9 +24,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let state: DeckOptionsState;
     let configList = state.configList;
 
-    let addModalKey: string;
-    let renameModalKey: string;
-
     function configLabel(entry: ConfigListEntry): string {
         const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
         return `${entry.name} (${count})`;
@@ -43,6 +43,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onRenameConfig(text: string): void {
         state.setCurrentName(text);
     }
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let addModalKey: string;
+    let renameModalKey: string;
+    let oldName = "";
+
+    function onAdd() {
+        modals.get(addModalKey)!.show();
+    }
+
+    function onRename() {
+        oldName = state.getCurrentName();
+        modals.get(renameModalKey)!.show();
+    }
 </script>
 
 <TextInputModal
@@ -54,7 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     title="Rename Config"
     prompt="Name"
     onOk={onRenameConfig}
-    value={state.getCurrentName()}
+    value={oldName}
     bind:modalKey={renameModalKey} />
 
 <StickyBar>
@@ -77,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <SaveButton {state} {addModalKey} {renameModalKey} />
+                <SaveButton {state} on:add={onAdd} on:rename={onRename} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>
diff --git a/ts/deckoptions/SaveButton.svelte b/ts/deckoptions/SaveButton.svelte
index 28a79dc5a..5a5002f38 100644
--- a/ts/deckoptions/SaveButton.svelte
+++ b/ts/deckoptions/SaveButton.svelte
@@ -4,10 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import { modalsKey } from "components/contextKeys";
-    import { getContext } from "svelte";
+    import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
-    import type Modal from "bootstrap/js/dist/modal";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -18,9 +16,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownDivider from "components/DropdownDivider.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
-    export let state: DeckOptionsState;
+    const dispatch = createEventDispatcher();
 
-    const modals = getContext<Map<string, Modal>>(modalsKey);
+    export let state: DeckOptionsState;
 
     function removeConfig(): void {
         // show pop-up after dropdown has gone away
@@ -47,17 +45,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function save(applyToChildDecks: boolean): void {
         state.save(applyToChildDecks);
     }
-
-    export let addModalKey: string;
-    export let renameModalKey: string;
-
-    function showAddModal() {
-        modals.get(addModalKey)!.show();
-    }
-
-    function showRenameModal() {
-        modals.get(renameModalKey)!.show();
-    }
 </script>
 
 <ButtonGroup>
@@ -69,8 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
             <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
             <DropdownMenu id={menuId}>
-                <DropdownItem on:click={showAddModal}>Add Config</DropdownItem>
-                <DropdownItem on:click={showRenameModal}>Rename Config</DropdownItem>
+                <DropdownItem on:click={() => dispatch('add')}>Add Config</DropdownItem>
+                <DropdownItem on:click={() => dispatch('rename')}>
+                    Rename Config
+                </DropdownItem>
                 <DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
                 <DropdownDivider />
                 <DropdownItem on:click={() => save(true)}>
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deckoptions/TextInputModal.svelte
index e694f8736..8d132941b 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deckoptions/TextInputModal.svelte
@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onOkClicked(): void {
         onOk(inputRef.value);
         modal.hide();
+        value = "";
     }
 
     function onShown(): void {