From 8bf9ffeb8754699d9d57607170dc55e4c7291289 Mon Sep 17 00:00:00 2001
From: Andrew Scott <ascott18@gmail.com>
Date: Wed, 4 Dec 2024 14:27:04 -0800
Subject: [PATCH] fix: close c-select menu on focus lost, fix open-on-clear

---
 CHANGELOG.md                                  |  7 ++++
 .../examples/c-select/multiple-binding.vue    |  1 +
 .../src/components/input/c-select.vue         | 34 ++++++++++++++++---
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bbbe9a64..7f86ed49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,18 @@
 # 5.3.0
 
+## Features
+
 - Added `multiple` prop to `c-select`, allowing for the selection of multiple models.
 - `c-select-many-to-many` is now based on `c-select` rather than `v-autocomplete`. As a result, it has gained support for all of the props and slots of `c-select`.
 - Added strong types for pass-through Vuetify slots and props to `c-input`, `c-select`, `c-select-many-to-many`, and `c-datetime-picker`.
 - Added a `color` prop to `c-datetime-picker`.
 - Added experimental client-side support for System.Text.Json's PreserveReferences reference handling option in server responses. This does not require changes to your JSON settings in Program.cs - instead, it is activated by setting `refResponse` on the `DataSourceParameters` for a request (i.e. the `$params` object on a ViewModel or ListViewModel). This option can significantly reduce response sizes in cases where the same object occurs many times in a response.
 
+## Fixes
+
+- `c-select` `open-on-clear` prop once again functions as expected.
+- `c-select` now closes when changing focus to other elements on the page
+
 # 5.2.1
 
 ## Fixes
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
index 290bd71c..bab9470f 100644
--- a/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
@@ -16,6 +16,7 @@
         for="Person"
         multiple
         v-model:objectValue="selectedModels"
+        open-on-clear
         :create="{
           getLabel(search: string, items: Person[]) { return items.length == 0 ? search : false },
           async getItem(search: string, label: string) { return new Person({ name: label }) }
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
index e88f9358..2d1636fc 100644
--- a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
+++ b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
@@ -1,5 +1,6 @@
 <template>
   <v-input
+    ref="rootRef"
     class="c-select"
     :class="{
       'c-select--is-menu-active': menuOpen,
@@ -99,6 +100,7 @@
         location="bottom"
       >
         <v-sheet
+          ref="menuContentRef"
           @keydown.capture.down.stop.prevent="
             pendingSelection = Math.min(
               listItems.length - 1,
@@ -110,6 +112,7 @@
           "
           @keydown.capture.enter.stop.prevent="confirmPendingSelection"
           @keydown.capture.tab.stop.prevent="confirmPendingSelection"
+          @blur.capture="onMenuContentBlur"
         >
           <v-text-field
             v-model="search"
@@ -145,7 +148,6 @@
           <v-list
             class="py-0"
             max-height="302"
-            ref="listRef"
             density="compact"
             :aria-multiselectable="effectiveMultiple"
             role="listbox"
@@ -508,7 +510,7 @@ const props = withDefaults(
     } & /* @vue-ignore */ InheritedProps
   >(),
   {
-    openOnClear: true,
+    openOnClear: false,
     canDeselect: true,
     clearable: undefined,
     multiple: undefined,
@@ -531,8 +533,9 @@ const passthroughSlots = computed(() => {
   return ret;
 });
 
+const rootRef = ref<ComponentPublicInstance>();
 const mainInputRef = ref<HTMLInputElement>();
-const listRef = ref<ComponentPublicInstance>();
+const menuContentRef = ref<ComponentPublicInstance>();
 const searchRef = ref<ComponentPublicInstance>();
 
 const fieldAttrs = computed(() =>
@@ -945,10 +948,25 @@ function onInput(value: SelectedModelTypeSingle | null, dontFocus = false) {
   if (!dontFocus && !effectiveMultiple.value) {
     if (!value) {
       openMenu();
+      return;
     } else {
       closeMenu(true);
+      return;
     }
   }
+
+  if (value == null && props.openOnClear) {
+    openMenu();
+  }
+}
+
+function onMenuContentBlur(event: FocusEvent) {
+  if (
+    !menuContentRef.value?.$el.contains(event.relatedTarget as HTMLElement) &&
+    !rootRef.value?.$el.contains(event.target as HTMLElement)
+  ) {
+    closeMenu(true);
+  }
 }
 
 /** When a key is pressed on the top level input */
@@ -1018,7 +1036,7 @@ async function createItem() {
 }
 
 async function openMenu(select?: boolean) {
-  if (!isInteractive.value) return;
+  if (!isInteractive.value || forceClosed) return;
 
   if (select == undefined) {
     // Select the whole search input if it hasn't changed recently.
@@ -1061,7 +1079,13 @@ async function openMenu(select?: boolean) {
   }
 }
 
+let forceClosed = false;
 function closeMenu(force = false) {
+  if (force) {
+    forceClosed = true;
+    setTimeout(() => (forceClosed = false), 300);
+  }
+
   if (!menuOpen.value) return;
   if (menuOpenForced.value && !force) return;
 
@@ -1173,7 +1197,7 @@ watch(
 watch(pendingSelection, async () => {
   await nextTick();
   await nextTick();
-  var listDiv = listRef.value?.$el as HTMLElement;
+  var listDiv = menuContentRef.value?.$el as HTMLElement;
   var selectedItem = listDiv?.querySelector(".pending-selection");
   selectedItem?.scrollIntoView?.({
     behavior: "auto",