From 7b26d5988dcb9576d7f63339fc444b6ec8c1b7c8 Mon Sep 17 00:00:00 2001
From: jer3m01 <jer3m01@jer3m01.com>
Date: Wed, 31 Jul 2024 03:32:44 +0200
Subject: [PATCH] fix(combobox): close list on outside click

---
 packages/core/src/combobox/combobox-content.tsx |  7 +++++--
 packages/core/src/combobox/combobox-input.tsx   | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/combobox/combobox-content.tsx b/packages/core/src/combobox/combobox-content.tsx
index ab33365e..b3d8561f 100644
--- a/packages/core/src/combobox/combobox-content.tsx
+++ b/packages/core/src/combobox/combobox-content.tsx
@@ -82,11 +82,14 @@ export function ComboboxContent<T extends ValidComponent = "div">(
 		"onFocusOutside",
 	]);
 
-	const close = () => {
+	const dismiss = () => {
 		context.resetInputValue(
 			context.listState().selectionManager().selectedKeys(),
 		);
 		context.close();
+		setTimeout(() => {
+			context.close();
+		});
 	};
 
 	const onFocusOutside = (e: FocusOutsideEvent) => {
@@ -165,7 +168,7 @@ export function ComboboxContent<T extends ValidComponent = "div">(
 						local.style,
 					)}
 					onFocusOutside={onFocusOutside}
-					onDismiss={close}
+					onDismiss={dismiss}
 					{...context.dataset()}
 					{...others}
 				/>
diff --git a/packages/core/src/combobox/combobox-input.tsx b/packages/core/src/combobox/combobox-input.tsx
index 01730b81..fd21950b 100644
--- a/packages/core/src/combobox/combobox-input.tsx
+++ b/packages/core/src/combobox/combobox-input.tsx
@@ -37,6 +37,7 @@ export interface ComboboxInputCommonProps<
 	ref: T | ((el: T) => void);
 	onInput: JSX.EventHandlerUnion<T, InputEvent>;
 	onKeyDown: JSX.EventHandlerUnion<T, KeyboardEvent>;
+	onClick: JSX.EventHandlerUnion<T, MouseEvent>;
 	onFocus: JSX.EventHandlerUnion<T, FocusEvent>;
 	onBlur: JSX.EventHandlerUnion<T, FocusEvent>;
 	onTouchEnd: JSX.EventHandlerUnion<T, TouchEvent>;
@@ -93,6 +94,7 @@ export function ComboboxInput<T extends ValidComponent = "input">(
 		[
 			"ref",
 			"disabled",
+			"onClick",
 			"onInput",
 			"onKeyDown",
 			"onFocus",
@@ -113,6 +115,14 @@ export function ComboboxInput<T extends ValidComponent = "input">(
 
 	const { fieldProps } = createFormControlField(formControlFieldProps);
 
+	const onClick: JSX.EventHandlerUnion<HTMLInputElement, MouseEvent> = (e) => {
+		callHandler(e, local.onClick);
+
+		if (context.triggerMode() === "focus" && !context.isOpen()) {
+			context.open(false, "focus");
+		}
+	};
+
 	const onInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (e) => {
 		callHandler(e, local.onInput);
 
@@ -315,6 +325,7 @@ export function ComboboxInput<T extends ValidComponent = "input">(
 			aria-required={formControlContext.isRequired() || undefined}
 			aria-disabled={formControlContext.isDisabled() || undefined}
 			aria-readonly={formControlContext.isReadOnly() || undefined}
+			onClick={onClick}
 			onInput={onInput}
 			onKeyDown={onKeyDown}
 			onFocus={onFocus}