From 4137fb4df65848888c6cc7a0fe826f276a0a9478 Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Mon, 21 Oct 2024 16:03:33 -0400
Subject: [PATCH] fix: select menu placeholder styling (#117)

---
 src/components/InputSelect/PdapInputSelect.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/InputSelect/PdapInputSelect.vue b/src/components/InputSelect/PdapInputSelect.vue
index 5191e20..4c35ebc 100644
--- a/src/components/InputSelect/PdapInputSelect.vue
+++ b/src/components/InputSelect/PdapInputSelect.vue
@@ -27,7 +27,10 @@
 			@click="toggleOpen"
 			@keydown="handleKeyDown"
 		>
-			<div class="selected-value">
+			<div
+				class="selected-value"
+				:class="{ 'value-is-placeholder': !selectedOption }"
+			>
 				{{ selectedOption ? selectedOption.label : placeholder }}
 			</div>
 			<div class="arrow" :class="{ open: isOpen }" />
@@ -271,6 +274,10 @@ watch(
 	@apply py-2 px-3 text-neutral-950 dark:text-neutral-50;
 }
 
+.selected-value.value-is-placeholder {
+	@apply text-neutral-600;
+}
+
 .arrow {
 	@apply absolute top-1/2 right-3 w-0 h-0 border-l-8 border-r-8 border-t-8 border-solid border-x-transparent border-t-neutral-950 dark:border-t-neutral-50 transition-transform;
 }