trigger work

huntabyte · Jul 19, 2024 · 8de97a0 · 8de97a0
1 parent 405c043
commit 8de97a0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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"