fix(combobox): close list on outside click

kobaltedev · Jul 31, 2024 · 7b26d59 · 7b26d59
1 parent 3f0e195
commit 7b26d59
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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}