Fix presets dropdown not deselecting after creating a save

This commit is contained in:
thepaperpilot 2022-05-10 23:37:43 -05:00
parent 55c4476edf
commit 2e3f1de158
2 changed files with 13 additions and 6 deletions

View file

@ -37,7 +37,7 @@
<Select <Select
v-if="Object.keys(bank).length > 0" v-if="Object.keys(bank).length > 0"
:options="bank" :options="bank"
:modelValue="undefined" :modelValue="selectedPreset"
@update:modelValue="preset => newFromPreset(preset as string)" @update:modelValue="preset => newFromPreset(preset as string)"
closeOnSelect closeOnSelect
placeholder="Select preset" placeholder="Select preset"
@ -83,6 +83,7 @@ defineExpose({
const importingFailed = ref(false); const importingFailed = ref(false);
const saveToImport = ref(""); const saveToImport = ref("");
const selectedPreset = ref<string | null>(null);
watch(saveToImport, importedSave => { watch(saveToImport, importedSave => {
if (importedSave) { if (importedSave) {
@ -246,6 +247,12 @@ function openSave(id: string) {
} }
function newFromPreset(preset: string) { function newFromPreset(preset: string) {
// Reset preset dropdown
selectedPreset.value = preset;
nextTick(() => {
selectedPreset.value = null;
});
if (preset[0] === "{") { if (preset[0] === "{") {
// plaintext. No processing needed // plaintext. No processing needed
} else if (preset[0] === "e") { } else if (preset[0] === "e") {

View file

@ -16,7 +16,7 @@
<script setup lang="ts"> <script setup lang="ts">
import "components/common/fields.css"; import "components/common/fields.css";
import { CoercableComponent } from "features/feature"; import { CoercableComponent } from "features/feature";
import { computeOptionalComponent } from "util/vue"; import { computeOptionalComponent, unwrapRef } from "util/vue";
import { ref, toRef, watch } from "vue"; import { ref, toRef, watch } from "vue";
import VueNextSelect from "vue-next-select"; import VueNextSelect from "vue-next-select";
import "vue-next-select/dist/index.css"; import "vue-next-select/dist/index.css";
@ -36,12 +36,12 @@ const emit = defineEmits<{
const titleComponent = computeOptionalComponent(toRef(props, "title"), "span"); const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
const value = ref<SelectOption | undefined>( const value = ref<SelectOption | null>(
props.options.find(option => option.value === props.modelValue) props.options.find(option => option.value === props.modelValue) ?? null
); );
watch(toRef(props, "modelValue"), modelValue => { watch(toRef(props, "modelValue"), modelValue => {
if (value.value?.value !== modelValue) { if (unwrapRef(value) !== modelValue) {
value.value = props.options.find(option => option.value === modelValue); value.value = props.options.find(option => option.value === modelValue) ?? null;
} }
}); });