From 4cd2cb8689c5a3829e785092c85bf644de450345 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Jul 2024 10:04:43 -0400
Subject: [PATCH 1/3] prevent showing selected items when in dropdown mode and
 max items is 1

---
 .../inputs/relationship/RelationshipInput.vue          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index b8f0940e2d..e6e69e4bfd 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -19,7 +19,7 @@
 
         <loading-graphic v-if="initializing" :inline="true" />
 
-        <template v-if="!initializing">
+        <template v-if="shouldShowSelectedItems">
             <div ref="items" class="relationship-input-items space-y-1 outline-none" :class="{ 'mt-4': usesSelectField && items.length }">
                 <component
                     :is="itemComponent"
@@ -183,6 +183,14 @@ export default {
 
         usesSelectField() {
             return ['select', 'typeahead'].includes(this.mode);
+        },
+
+        shouldShowSelectedItems() {
+            if (this.initializing) return false;
+
+            if (this.usesSelectField && this.maxItems === 1) return false;
+
+            return true;
         }
 
     },

From 0cbe860209b96865074562a7e09a6ff3006dcc33 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Jul 2024 10:20:11 -0400
Subject: [PATCH 2/3] show status and hint in selected option

---
 resources/css/vendors/vue-select.css                     | 5 +++++
 .../js/components/inputs/relationship/SelectField.vue    | 9 +++++++++
 2 files changed, 14 insertions(+)

diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index f4cfbbc050..621e46c688 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -83,6 +83,11 @@
 	padding: 8px 12px !important;
 }
 
+.vs--single .vs__selected {
+    display: block !important;
+    width: 100%;
+}
+
 .vs--single.vs--unsearchable .vs__selected-options {
 	@apply clickable;
     @apply flex flex-1 rounded-s relative h-full border-0;
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 4d31c01b7c..4b2c22dcfb 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -31,6 +31,15 @@
                     <div v-if="hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap" v-text="hint" />
                 </div>
             </template>
+            <template #selected-option="{ title, hint, status }" v-if="!multiple">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center">
+                        <div v-if="status" class="little-dot rtl:ml-2 ltr:mr-2 hidden@sm:block" :class="status" />
+                        <div v-text="title" />
+                    </div>
+                    <div v-if="hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap" v-text="hint" />
+                </div>
+            </template>
             <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
             <template #search="{ events, attributes }" v-if="multiple">
                 <input

From db7201208f8cbb3d0796facdc4aebfe6f435a5ba Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Jul 2024 10:40:19 -0400
Subject: [PATCH 3/3] Revert "show status and hint in selected option"

This reverts commit 0cbe860209b96865074562a7e09a6ff3006dcc33.
---
 resources/css/vendors/vue-select.css                     | 5 -----
 .../js/components/inputs/relationship/SelectField.vue    | 9 ---------
 2 files changed, 14 deletions(-)

diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 621e46c688..f4cfbbc050 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -83,11 +83,6 @@
 	padding: 8px 12px !important;
 }
 
-.vs--single .vs__selected {
-    display: block !important;
-    width: 100%;
-}
-
 .vs--single.vs--unsearchable .vs__selected-options {
 	@apply clickable;
     @apply flex flex-1 rounded-s relative h-full border-0;
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 4b2c22dcfb..4d31c01b7c 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -31,15 +31,6 @@
                     <div v-if="hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap" v-text="hint" />
                 </div>
             </template>
-            <template #selected-option="{ title, hint, status }" v-if="!multiple">
-                <div class="flex justify-between items-center">
-                    <div class="flex items-center">
-                        <div v-if="status" class="little-dot rtl:ml-2 ltr:mr-2 hidden@sm:block" :class="status" />
-                        <div v-text="title" />
-                    </div>
-                    <div v-if="hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap" v-text="hint" />
-                </div>
-            </template>
             <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
             <template #search="{ events, attributes }" v-if="multiple">
                 <input