From 8de97a04ea383613a9461b3280f12f4cea10308d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 19 Jul 2024 18:24:48 -0400
Subject: [PATCH] trigger work

---
 .../bits-ui/src/lib/bits/combobox/combobox.svelte.ts  | 11 +++++++++++
 .../src/lib/components/demos/combobox-demo.svelte     |  6 ++----
 .../docs/src/lib/components/demos/tooltip-demo.svelte |  6 ++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
index ed20b08b8..10485dea5 100644
--- a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
@@ -427,6 +427,16 @@ class ComboboxTriggerState {
 		});
 	}
 
+	#onkeydown = (e: KeyboardEvent) => {
+		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+			e.preventDefault();
+			if (document.activeElement !== this.root.inputNode) {
+				this.root.inputNode?.focus();
+			}
+			this.root.toggleMenu();
+		}
+	};
+
 	/**
 	 * `pointerdown` fires before the `focus` event, so we can prevent the default
 	 * behavior of focusing the button and keep focus on the input.
@@ -447,6 +457,7 @@ class ComboboxTriggerState {
 		"data-disabled": getDataDisabled(this.root.disabled.value),
 		disabled: this.root.disabled.value ? true : undefined,
 		onpointerdown: this.#onpointerdown,
+		onkeydown: this.#onkeydown,
 		[COMBOBOX_TRIGGER_ATTR]: "",
 	}));
 }
diff --git a/sites/docs/src/lib/components/demos/combobox-demo.svelte b/sites/docs/src/lib/components/demos/combobox-demo.svelte
index beae3d128..058f97d6a 100644
--- a/sites/docs/src/lib/components/demos/combobox-demo.svelte
+++ b/sites/docs/src/lib/components/demos/combobox-demo.svelte
@@ -36,10 +36,8 @@
 			placeholder="Search a fruit"
 			aria-label="Search a fruit"
 		/>
-		<Combobox.Trigger>
-			<CaretUpDown
-				class="absolute end-3 top-1/2 size-6 -translate-y-1/2 text-muted-foreground"
-			/>
+		<Combobox.Trigger class="absolute end-3 top-1/2 size-6 -translate-y-1/2">
+			<CaretUpDown class="size-6 text-muted-foreground" />
 		</Combobox.Trigger>
 	</div>
 
diff --git a/sites/docs/src/lib/components/demos/tooltip-demo.svelte b/sites/docs/src/lib/components/demos/tooltip-demo.svelte
index bfa2c74bb..3c5ad0b09 100644
--- a/sites/docs/src/lib/components/demos/tooltip-demo.svelte
+++ b/sites/docs/src/lib/components/demos/tooltip-demo.svelte
@@ -12,8 +12,10 @@
 			<MagicWand class="size-5" />
 		</Tooltip.Trigger>
 		<Tooltip.Content sideOffset={8}>
-			<div class="bg-background">
-				<Tooltip.Arrow class="rounded-[2px] border-l border-t border-dark-10" />
+			<div>
+				<Tooltip.Arrow
+					class="rounded-[2px] border-l border-t border-dark-10 text-dark-10"
+				/>
 			</div>
 			<div
 				class="flex items-center justify-center rounded-input border border-dark-10 bg-background p-3 text-sm font-medium shadow-popover outline-none"