From 2e3f1de1587c2b60c9bf2a4fce51cdf6bd542b0a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 23:37:43 -0500
Subject: [PATCH] Fix presets dropdown not deselecting after creating a save

---
 src/components/SavesManager.vue  |  9 ++++++++-
 src/components/fields/Select.vue | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index f338f00..04dfd56 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -37,7 +37,7 @@
                         <Select
                             v-if="Object.keys(bank).length > 0"
                             :options="bank"
-                            :modelValue="undefined"
+                            :modelValue="selectedPreset"
                             @update:modelValue="preset => newFromPreset(preset as string)"
                             closeOnSelect
                             placeholder="Select preset"
@@ -83,6 +83,7 @@ defineExpose({
 
 const importingFailed = ref(false);
 const saveToImport = ref("");
+const selectedPreset = ref<string | null>(null);
 
 watch(saveToImport, importedSave => {
     if (importedSave) {
@@ -246,6 +247,12 @@ function openSave(id: string) {
 }
 
 function newFromPreset(preset: string) {
+    // Reset preset dropdown
+    selectedPreset.value = preset;
+    nextTick(() => {
+        selectedPreset.value = null;
+    });
+
     if (preset[0] === "{") {
         // plaintext. No processing needed
     } else if (preset[0] === "e") {
diff --git a/src/components/fields/Select.vue b/src/components/fields/Select.vue
index 417d122..1be9328 100644
--- a/src/components/fields/Select.vue
+++ b/src/components/fields/Select.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import "components/common/fields.css";
 import { CoercableComponent } from "features/feature";
-import { computeOptionalComponent } from "util/vue";
+import { computeOptionalComponent, unwrapRef } from "util/vue";
 import { ref, toRef, watch } from "vue";
 import VueNextSelect from "vue-next-select";
 import "vue-next-select/dist/index.css";
@@ -36,12 +36,12 @@ const emit = defineEmits<{
 
 const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
 
-const value = ref<SelectOption | undefined>(
-    props.options.find(option => option.value === props.modelValue)
+const value = ref<SelectOption | null>(
+    props.options.find(option => option.value === props.modelValue) ?? null
 );
 watch(toRef(props, "modelValue"), modelValue => {
-    if (value.value?.value !== modelValue) {
-        value.value = props.options.find(option => option.value === modelValue);
+    if (unwrapRef(value) !== modelValue) {
+        value.value = props.options.find(option => option.value === modelValue) ?? null;
     }
 });